간단한 JS 자동 프롬프트 텍스트 상자 code_javascript 기술-JS 튜토리얼-php.cn

이 예에서는 색상을 예로 들어 사용자에게 자동 프롬프트를 제공합니다. 디스플레이 효과 및 실행 결과는 다음과 같습니다.

1. 프레임 구조 설정: 코드 복사 코드는 다음과 같습니다. 🎜> 색상: /ul>

2. 페이지 및 양식 CSS:

코드 복사 코드는 다음과 같습니다: body{ font-family: Arial, Helvetica, sans-serif; font-size:12px; margin:5px; form{padding:0px; margin:0px;} input{ 글꼴 계열:Arial, Helvetica -serif; 크기:12px; 테두리: 1px #000000; 너비: 200px; 여백: 0px; 색상: #004a7e; 글꼴 크기:12px ; 글꼴-가족:Arial, Helvetica, sans-serif; 왼쪽:41px; #popup.show{ 테두리:1px 솔리드 #popup. hide{ border:none >} ul{ list-style:none; padding:0px; li.mouseOver{ 배경색:#004a7e; :#FFFFFF; li.mouseOut{ 배경색:#FFFFFF; 색상:#004a7e -->

3. JS 매칭 사용자 입력:

코드 복사

코드는 다음과 같습니다:

var oInputField ; // var oPopDiv가 많은 함수에서 사용된다는 점을 고려하여 //전역 변수 형식을 사용합니다. var oColorsUl; "red","green","blue", "magenta","yellow",..."ivory","darkmagenta","cornfloewrblue"]; aColors.sort(); 표시 결과를 더 친숙하게 만듭니다 function initVars() { oInputField = document.forms["myForm1"].colors; oPopDiv = document.getElementByIdx_x("popup") oColorsUl = document.getElementByIdx_x( "colors_ul"); functionclearColors(){ for(var i=oColorsUl.childNodes.length-1;i>=0;i--) oColorsUl.removeChild(oColorsUl.childNodes[i]) oPopDiv.className = "hide"; function setColors(the_colors) {clearColors(); //계속하기 전에 문자를 입력할 때마다 원래 프롬프트를 지웁니다. oPopDiv.className = "show" var oLi; for(var i=0;i oColorsUl.appendChild(oLi) oLi.appendChild(document.createTextNode (the_colors[i])); oLi.= function(){ this.className = "mouseOver"; //마우스가 지나갈 때 oLi를 강조 표시합니다. = function(){ this.className = "mouseOut"; //종료시 원래 상태로 복원 oLi.onclick = function(){ oInputField.value = this.firstChild.nodeValue clearColors(); //동시에 프롬프트 상자 지우기} function findColors(){ initVars(); //변수 초기화 if( oInputField.value.length > 0){ var aResult = new Array() //일치하는 결과를 저장하는 데 사용됩니다. 🎜>for(var i=0;i aResult. push(aColors[i]); //결과 푸시 if(aResult.length> 0) //일치하는 색상이 있으면 표시됩니다. setColors(aResult) else / /그렇지 않으면 사용자가 문자를 하나 더 입력합니다. clearColors(); //일치 항목을 없음으로 변경할 수 있습니다. 일치 항목이 없으면 다른 항목을 지워야 합니다. clearColors(); 입력이 없을 때 프롬프트 상자(예: 사용자가 del 키를 누름)

文本框输入提示/自动完成的Js代码 文本框输入自动匹配或提示的功能，输入内容，自动匹配对应数据，可用上下键控制选项、按回车键选择，也可以直接用鼠标选择。代码：建立实例，第一个参数是实例对象的名称，第二个是最多显示的数量。 文本框输入提示/自动完成功能 function mSift_SeekTp(oObj,nDire){if(oObj.getBoundingClientRect&&!document.all){var oDc=document.documentElement;switch(nDire){case 0:return oObj.getBoundingClientRect().top+oDc.scrollTop;case 1:return oObj.getBoundingClientRect().right+oDc.scrollLeft;case 2:return oObj.getBoundingClientRect().bottom+oDc.scrollTop;case 3:return oObj.getBoundingClientRect().left+oDc.scrollLeft;}}else{if(nDire==1||nDire==3){var nPosition=oObj.offsetLeft;}else{var nPosition=oObj.offsetTop;}if(arguments[arguments.length-1]!=0){if(nDire==1){nPosition+=oObj.offsetWidth;}else if(nDire==2){nPosition+=oObj.offsetHeight;}}if(oObj.offsetParent!=null){nPosition+=mSift_SeekTp(oObj.offsetParent,nDire,0);}return nPosition;}} function mSift(cVarName,nMax){this.oo=cVarName;this.Max=nMax;} mSift.prototype={ Varsion:'v2010.10.29 by AngusYoung | mrxcool.com', Target:Object, TgList:Object, Listeners:null, SelIndex:0, Data:[], ReData:[], Create:function(oObj){ var _this=this; var oUL=document.createElement('ul'); oUL.style.display='none'; oObj.parentNode.insertBefore(oUL,oObj); _this.TgList=oUL; oObj.onkeydown=oObj.onclick=function(e){_this.Listen(this,e);}; oObj.onblur=function(){setTimeout(function(){_this.Clear();},100);}; }, Complete:function(){}, Select:function(){ var _this=this; if(_this.ReData.length>0){ _this.Target.value=_this.ReData[_this.SelIndex].replace(/\*/g,'*').replace(/\|/g,'|'); _this.Clear(); } setTimeout(function(){_this.Target.focus();},10); _this.Complete(); }, Listen:function(oObj){ var _this=this; _this.Target=oObj; var e=arguments[arguments.length-1]; var ev=window.event||e; switch(ev.keyCode){ case 9://TAB return; case 13://ENTER _this.Target.blur(); _this.Select(); return; case 38://UP _this.SelIndex=_this.SelIndex>0?_this.SelIndex-1:_this.ReData.length-1; break; case 40://DOWN _this.SelIndex=_this.SelIndex<_this.ReData.length-1?_this.SelIndex+1:0; break; default: _this.SelIndex=0; } if(_this.Listeners){clearInterval(_this.Listeners);} _this.Listeners=setInterval(function(){ _this.Get(); },10); }, Get:function(){ var _this=this; if(_this.Target.value==''){_this.Clear();return;} if(_this.Listeners){clearInterval(_this.Listeners);}; _this.ReData=[]; var cResult=''; for(var i=0;i =0){ _this.ReData.push(_this.Data[i]); if(_this.ReData.length==_this.Max){break;} } } var cRegPattern=_this.Target.value.replace(/\*/g,'*'); cRegPattern=cRegPattern.replace(/\|/g,'|'); cRegPattern=cRegPattern.replace(/\+/g,'\\+'); cRegPattern=cRegPattern.replace(/\./g,'\\.'); cRegPattern=cRegPattern.replace(/\?/g,'\\?'); cRegPattern=cRegPattern.replace(/\^/g,'\\^'); cRegPattern=cRegPattern.replace(/\$/g,'\\$'); cRegPattern=cRegPattern.replace(/$/g,'\\('); cRegPattern=cRegPattern.replace(/$/g,'\\)'); cRegPattern=cRegPattern.replace(/\[/g,'\\['); cRegPattern=cRegPattern.replace(/\]/g,'\\]'); cRegPattern=cRegPattern.replace(/\\/g,'\\\\'); var cRegEx=new RegExp(cRegPattern,'i'); for(var i=0;i =0){ _this.ReData[i]=_this.ReData[i].replace(/\*/g,'*'); } if(_this.Target.value.indexOf('|')>=0){ _this.ReData[i]=_this.ReData[i].replace(/\|/g,'|'); } cResult+=' ' +_this.ReData[i].replace(cRegEx,function(s){return ' '+s+'';});+''; } if(cResult==''){_this.Clear();} else{ _this.TgList.innerHTML=cResult; _this.TgList.style.cssText='display:block;position:absolute;background:#fff;border:#090 solid 1px;margin:-1px 0 0;padding: 5px;list-style:none;font-size:12px;'; _this.TgList.style.top=mSift_SeekTp(_this.Target,2)+'px'; _this.TgList.style.left=mSift_SeekTp(_this.Target,3)+'px'; _this.TgList.style.width=_this.Target.offsetWidth-12+'px'; } var oLi=_this.TgList.getElementsByTagName('li'); if(oLi.length>0){ oLi[_this.SelIndex].style.cssText='background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;'; } }, ChangeOn:function(oObj){ var oLi=this.TgList.getElementsByTagName('li'); for(var i=0;i