Js는 자동 프롬프트로 텍스트 상자 효과를 구현합니다.

두 가지 자동 프롬프트 텍스트 상자 효과를 위한 js 구현 코드를 공유하세요.

예제 1, AJAX 구현을 직접 작성합니다. 고객:

자동 Promping_bbs.it-home.org< ;/title>을 위한 Ajax 텍스트 상자 ; <li>
<style> <li><-- <li>font-family:Arial, Helvetica, sans-serif <li>여백: 0px; :5px; <li>} <li>form{padding:0px; margin:0px;} <li>input{ <li>/* 사용자 입력 상자 스타일*/ <li>font-family:Arial, Helvetica, sans -serif; 글꼴 크기:12px; 테두리:1px 솔리드 #000000; 너비:200px; 여백:0px; <li>#popup{ <li> /* 프롬프트 상자 div 블록*/ <li>색상:#004a7e; 글꼴-크기:12px;<li> left:41px; top:25px; <li>} <li>#popup.show{ <li>/* 툴팁 테두리 표시*/ <li>border:1px solid #004a7e; #popup.hide{ <li>/* 프롬프트 상자의 테두리 숨기기*/ <li>border:none <li>} <li>/* 프롬프트 상자의 스타일*/ <li>ul{ <li> 목록 스타일:없음; <li>여백:0px; <li>} <li>li.mouseOver{ <li>배경색:#004a7e; } <li>li.mouseOut{ <li>배경색:#FFFFFF; <li>색상:#004a7e <li>} <li></style> script Language="javascript"> var oInputField; //많은 함수를 사용한다는 점을 고려하여 </li>
<li>var oPopDiv; //그래서 전역변수 형식을 사용합니다. </li>
<li>var oColorsUl; 🎜>function createXMLHttpRequest(){ </li>
<li>if(window.ActiveXObject) </li>
<li>xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") </li>
<li>else if(window.XMLHttpRequest) </li>
<li>xmlHttp = new XMLHttpRequest() ; </li>
<li>} </li>
<li>function initVars(){ </li>
<li>//변수 초기화</li>
<li>oInputField = document.forms["myForm1"].colors </li>
<li>oPopDiv = document.getElementById("popup"); </li>
<li>oColorsUl = document.getElementById("colors_ul"); </li>
<li>} </li>
<li>functionclearColors(){ </li>
<li>//프롬프트 내용 지우기</li>
<li>for(var i=oColorsUl.childNodes.length-1 ; i>=0;i--) </li>
<li>oColorsUl.removeChild(oColorsUl.childNodes[i]); </li>
<li>oPopDiv.className = "hide"; </li>
<li>} </li>
<li>function setColors(the_colors) 🎜 >//프롬프트 상자를 표시하고 전달된 매개변수는 일치하는 결과의 배열입니다.</li>
<li>clearColors(); //문자를 입력할 때마다 계속하기 전에 원래 프롬프트를 지웁니다.</li>
<li>oPopDiv.className = " show"; </li>
<li>var oLi; </li>
<li>for(var i=0;i<the_colors.length>//일치하는 프롬프트 결과를 하나씩 사용자에게 표시<li>oLi = document.createElement("li"); </li>
<li>oColorsUl.appendChild(oLi); </li>
<li>oLi.appendChild(document.createTextNode(the_colors[i])) </li>
<li>oLi.onmouseover = function(){ </li>
<li>this.className = "mouseOver"; //마우스가 지나갈 때 강조 표시</li>
<li>} </li>
<li>oLi.onmouseout = function(){ </li>
<li>this.className = "mouseOut"; 떠나기</li>
<li>} </li>
<li>oLi.onclick = function(){ </li>
<li>//사용자가 일치하는 항목을 클릭하면 입력 상자를 해당 항목의 값으로 설정합니다. </li>
<li>oInputField.value = this.firstChild .nodeValue; </li>
<li>clearColors() ; //프롬프트 상자 지우기 </li>
<li>} </li>
<li>} </li>
<li>} </li>
<li>function findColors(){ </li>
<li>initVars() //초기화 변수</li>
<li>if(oInputField.value.length > 0){ </li>
<li>createXMLHttpRequest(); //서버에 사용자 입력 보내기</li>
<li>var sUrl = "9-10.aspx?sColor=" oInputField.value "×tamp=" new Date().getTime() ; </li>
<li>xmlHttp.open("GET",sUrl,true) </li>
<li>xmlHttp.onreadystatechange = function(){ </li>
<li>if(xmlHttp.readyState = = 4 && xmlHttp.status == 200){ </li>
<li>var aResult = new Array(); </li>
<li>if(xmlHttp.responseText.length){ </li>
<li>aResult = xmlHttp.responseText.split(","); </li>
<li>setColors(aResult); //서버 결과 표시 </li>
<li>} bbs.it-home.org</li>
<li>else </li>
<li>clearColors(); </li>
<li>} </li>
<li>xmlHttp.send( null); </li>
<li>} </li>
<li>else </li>
<li>clearColors(); //입력이 없을 때 프롬프트 상자 지우기(예: 사용자가 del 키를 누름) </li>
<li>} </li>
<li> script> </li>
<li> </li>
<li> </li>
<li> <form method="post" name="myForm1">색상: <input type="text" name="colors" id="colors" onkeyup="findColors();"> <li>
</form>
</li>
<li>
<div id="popup"> "> <li>
</div> </li>
<li>< ;/body> </li>
<li>
<li>
<li>
<li>코드 복사</li>
<li>
<li>
<p>服务器端（9-10.aspx ）： 
 </p>
<div class="blockcode">
<div id="code_JYr"><ol>
<li>
<li> </li>
<li> </li>
<li>Response.CacheControl = "캐시 없음"; </li>
<li>Response.AddHeader("Pragma","no-cache"); </li>
<li>string sInput = Request["sColor"].Trim(); </li>
<li>if(sInput.Length == 0) </li>
<li>return; </li>
<li>문자열 sResult = ""; </li>
<li>string[] aColors = new string[]{"aliceblue","antiquewith","aquamarine","azure","beige","bisque","black","blanchedalmond","blue"," blueviolet","brass",</li>
<li>"bronze","brown","burlywood","cadetblue","chartreuse","chocolate","copper","coral","cornfloewrblue","cornsilk", "시안색",</li>
<li>"darkblue","dark시안색","darkgoldenrod","darkgray","darkgreen","darkkhaki","darkmagenta","darkolivegreen","darkorchid",</li>
<li>"darkorchid", "darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink",</li>
<li>"deepskyblue","dimgray","dodgerblue","feldspar" ,"firebrick","floralwhite","forestgreen","fuchsia","gainsboro","gold","goldenrod",</li>
<li>"golenrod","gostwhite","gray","green","greenyellow ","honeydew","hotpink","indianred","inen","ivory","khaki","lavender",</li>
<li>"lavenderblush","lawngreen","lemonchiffon","lightblue"," lightcoral","light시안","lightgodenrod","lightgodenrodyellow","lightgray",</li>
<li>"lightgreen","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslateblue","lightslategray", "lightsteelblue","lightyellow",</li>
<li>"lime","limegreen","magenta","magenta","maroom","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurpul" ,</li>
<li>"mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream",</li>
<li>"mistyrose","moccasin","navajowhite","navy" ,"navyblue","oldlace","olivedrab","orange","orchid","orengered","palegodenrod",</li>
<li>"palegreen","paleturquoise","palevioletred","papayawhip","peachpuff ","페루","핑크","자두","파우더블루","보라색","석영","빨간색",</li>
<li>"rosybrown","royalblue","saddlebrown","salmon"," sandybrown","scarlet","seagreen","seashell","sienna","silver","skyblue","slategray",</li>
<li>"snow","springgreen","steelblue","tan", "엉겅퀴","토마토","청록색","보라색","보라색","밀","흰 연기","노란색","노란색 녹색"}; </li>
<li>for(int i=0;i<acolors.length>if(aColors[i].IndexOf(sInput) == 0) <li>sResult = aColors[i] ","; </li>
<li>} </li>
<li>if(sResult.Length>0) //如果有匹配项 </li>
<li>sResult = sResult.Substring(0,sResult.Length-1); //去掉最后的“,”号 </li>
<li>Response.Write(sResult); </li>
<li>%></li></acolors.length>
</li>
</ol></div>
<em onclick="copycode($('code_JYr'));">复代码</em>
</div>
<p>예제 2, jQuery를 사용하여 구현. 
고객:
 </p>
<div class="blockcode">
<div id="code_Vvb"><ol>
<li>
<li> </li>
<li> </li>
<li> </li>
<li>
<title>jQuery는 자동 프롬프트 텍스트 상자


 jquery .min.js">
<script> <li>var oInputField; //사용하는 함수가 많다는 점을 고려하여 <li>var oPopDiv; //따라서 전역 변수 형식 <li>var oColorsUl; <li>function initVars(){ <li>//변수 초기화 <li>oInputField = $("#colors") <li>oPopDiv = $("#popup" ) ; <li>oColorsUl = $("#colors_ul"); <li>} <li>functionclearColors(){ <li>//프롬프트 내용 지우기<li>oPopDiv.removeClass ("show"); <li>} <li>function setColors(the_colors){ <li>//프롬프트 상자 표시, 전달된 매개변수는 일치하는 결과의 배열입니다.<li>clearColors() // 문자를 입력하고 계속하기 전에 원래 프롬프트를 지웁니다. <li>oPopDiv.addClass("show") <li>for(var i=0;i<the_colors.length;i ) <li>//다음과 일치합니다. 프롬프트 결과 사용자에게 하나씩 표시됩니다. <li>oColorsUl.append($("<li>" the_colors[i] "</script>
oColorsUl.find("li").click ( function(){
oInputField.val($(this).text());
clearColors();
}).hover(
function(){$(this).addClass ( "mouseOver");},
function(){$(this).removeClass("mouseOver");}
)
}
function findColors(){
initVars( ) ; //변수 초기화
if(oInputField.val().length > 0){
//비동기 데이터 가져오기
$.get("14-10.aspx",{sColor:oInputField .val()},
function(data){
var aResult = new Array()
if(data.length > 0){
aResult = data.split("," ) ;
setColors(aResult); //서버 결과 표시
} bbs.it-home.org
else
clearColors()
}
 else
clearColors(); //입력이 없을 때(예: 사용자가 del 키를 누름) 프롬프트 상자 지우기
}



 색상: