当前位置: 代码迷 >> Java Web开发 >> 高分文本框一边输入一边提交
  详细解决方案

高分文本框一边输入一边提交

热度:165   发布时间:2016-04-17 00:54:19.0
高分求教:文本框一边输入一边提交
在jsp页面中文本框一边输入一边提交,同时光标在文本框中,谢谢了。。
最好有个例子。。。



------解决方案--------------------
探讨

ajax 至于是什么时候提交根据你的需求, 写js函数, 在你的文本框合适的事件里调用.

------解决方案--------------------
HTML code
javascript 输入框自动提示<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">.mouseOut{  background:#708090;  color:#fffafa;}.mouseOver{  background:#fffafa;  color:#000000;}</style><script type="text/javascript">var completeDiv;var inputField;var nameTable;var nameTableBody;var selectIndex;var tempInputValue;var suggest = new Array();suggest[0] = "ab";suggest[1] = "abc";suggest[2] = "abcd";function initVars(){    inputField = document.getElementById("names");    nameTable = document.getElementById("name_table");    completeDiv = document.getElementById("popup");    nameTableBody = document.getElementById("name_table_body");}function findNames(){    var eventkey = window.event.keyCode;    initVars();    if(eventkey == 27){        esc();    }else if(eventkey == 40 || eventkey == 38){        changeSelect(eventkey);    }else{           selectIndex = -1;         clearNames();        var inputValue = inputField.value;        tempInputValue = inputValue;        if(inputValue == null || inputValue == "")            return;            for(var i=0; i<suggest.length; i++){            if(suggest.indexOf(inputValue) == 0){                //alert(suggest.indexOf(inputValue));                setNames(inputValue, suggest);            }        }    }    }function esc(){    while(nameTableBody.childNodes.length > 0){        nameTableBody.removeChild(nameTableBody.firstChild);    }    completeDiv.style.border = "0px";    inputField.value = tempInputValue;}function changeSelect(eventkey){    var suggestSize = nameTableBody.childNodes.length;    if(suggestSize == null || suggestSize == 0)        return;    if(eventkey == 40 && selectIndex < suggestSize - 1)        selectIndex++;    else if(eventkey == 38 && selectIndex > -1)        selectIndex--;        for(var i=0; i<suggestSize; i++){        if(selectIndex == -1){            nameTableBody.childNodes.style.backgroundColor = "#ffffff";            nameTableBody.childNodes.style.color = "#000000";            inputField.value = tempInputValue;        }else if(i == selectIndex){            nameTableBody.childNodes.style.backgroundColor = "#000000";            nameTableBody.childNodes.style.color = "#ffffff";            inputField.value = nameTableBody.childNodes.childNodes[0].innerHTML;        }        else{            nameTableBody.childNodes.style.backgroundColor = "#ffffff";            nameTableBody.childNodes.style.color = "#000000";        }    }}function clearNames(){    var ind = nameTableBody.childNodes.length;    for(var i=ind-1; i>=0; i--){        nameTableBody.removeChild(nameTableBody.childNodes);    }    completeDiv.style.border = "none";}function setNames(inputValue, txt){    setOffsets();        var row, cell, txtNode;        var nextNode = txt;        row = document.createElement("tr");        cell = document.createElement("td");                cell.onmouseout = function(){this.className = 'mouseOver';};        cell.onmouseover = function(){this.className = 'mouseOut';};        cell.setAttribute("bgcolor", "#fffafa");        cell.setAttribute("border", "0");        cell.onclick = function(){populateName(this);};                if(inputValue == txt)            cell.onselect = true;                txtNode = document.createTextNode(nextNode);        cell.appendChild(txtNode);        row.appendChild(cell);        nameTableBody.appendChild(row);}function setOffsets(){    var end = inputField.offsetWidth;    var left = calculateOffsetLeft(inputField);    var top = calculateOffsetTop(inputField) + inputField.offsetHeight;        completeDiv.style.border = "black 1px solid";    completeDiv.style.left = left + "px";    completeDiv.style.top = top + "px";    completeDiv.style.width = end + "px";}function calculateOffsetLeft(field){    return calculateOffset(field, "offsetLeft");}function calculateOffsetTop(field){    return calculateOffset(field, "offsetTop");}function calculateOffset(field, attr){    var offset = 0;    while(field){        offset += field[attr];        field = field.offsetParent;    }    return offset;}function populateName(cell){    inputField.value = cell.firstChild.nodeValue;    clearNames();}function submitName(){    alert("ok");}</script></head><body>输入框自动提示(ie下通过,没做其他浏览器的事件兼容)<br/>输入:a,上下箭头选择,esc 退出提示<br/><form onsubmit="submitName();">names: <input type="text" size="20" id="names" onkeyup="findNames();" style="height:20;"/><div style="position:absolute; margin-top:-1px;" id="popup"><table id="name_table" bgcolor="#fffafa" border="0" cellspacing="0" cellpadding="0"><tbody id="name_table_body"></tbody></table></div></form></body></html>
  相关解决方案