シンプルな JS 自動プロンプトテキストボックス code_javascript スキル

この例では、ユーザーに自動プロンプトを提供する例として色を使用しています。表示効果と実行結果は次のとおりです。

1. フレーム構造を確立します: コードをコピーします コードは次のとおりです。 🎜> 色: /ul>

2. ページとフォーム CSS:

コードをコピーします コードは次のとおりです: body{ font-family: Arial、Helvetica、sans-serif; font-size:12px; margin:5px; フォーム{padding:0px; margin:0px;} input{ font-family:Arial、Helvetica、sans -serif; フォント サイズ: 1px; ボーダー: 200px; #popup{ 位置: 絶対幅: 202px; #004a7e; フォントサイズ:12px; フォントファミリー:Arial、トップ:25px;非表示{ ボーダー: なし > ul{ マージン: 0px; li.mouseOver{ 背景色: #004a7e; :#FFFFFF; li.mouseOut{ background-color:#FFFFFF;

を実装します。ユーザー入力に一致する 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"); function clearColors(){ 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"; for(var i=0;i oColorsUl.appendChild(oLi); (the_colors[i])); oLi. = function(){ this.className = "mouseOver"; // マウスが通過すると oLi が強調表示されます。 = "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); /そうでない場合はクリアされ、ユーザーはもう 1 文字を入力します。 clearColors(); //一致から None に変更することができます。none に達した場合は、else をクリアする必要があります。 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

シンプルな JS 自動プロンプト テキスト ボックス code_javascript スキル

シンプルな JS 自動プロンプトテキストボックス code_javascript スキル