在jsp页面中文本框一边输入一边提交,同时光标在文本框中,谢谢了。。
最好有个例子。。。
------解决方案--------------------
------解决方案--------------------
- 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>