Js는 자동 프롬프트로 텍스트 상자 효과를 구현합니다.-PHP 튜토리얼-php.cn

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

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

자동 Promping_bbs.it-home.org< ;/title>을 위한 Ajax 텍스트 상자 ; </li> <li><style> </li> <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;i ){ <li>//일치하는 프롬프트 결과를 하나씩 사용자에게 표시<li>oLi = document.createElement("li"); <li>oColorsUl.appendChild(oLi); <li>oLi.appendChild(document.createTextNode(the_colors[i])) <li>oLi.onmouseover = function(){ <li>this.className = "mouseOver"; //마우스가 지나갈 때 강조 표시<li>} <li>oLi.onmouseout = function(){ <li>this.className = "mouseOut"; 떠나기<li>} <li>oLi.onclick = function(){ <li>//사용자가 일치하는 항목을 클릭하면 입력 상자를 해당 항목의 값으로 설정합니다. <li>oInputField.value = this.firstChild .nodeValue; <li>clearColors() ; //프롬프트 상자 지우기 <li>} <li>} <li>} <li>function findColors(){ <li>initVars() //초기화 변수<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><script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> </li> <li><body> </li> <li> <form method="post" name="myForm1">색상: <input type="text" name= "colors" id="colors" onkeyup="findColors();" /> </li> <li></form></li> <li><div id="popup"> "></ul> </li> <li></div> </li> <li>< ;/body> </li> <li></html></li> <li> <li> <li>코드 복사</li> <li> <li> <p>服务器端（9-10.aspx ）： </p> <div class="blockcode"> <div id="code_JYr"><ol> <li> <li><%@ 페이지 언어="C#" ContentType="text/html" ResponseEncoding="gb2312" %> </li> <li><%@ Import Namespace="System.Data" %> </li> <li><% <li>Response.CacheControl = "캐시 없음"; <li>Response.AddHeader("Pragma","no-cache"); <li>string sInput = Request["sColor"].Trim(); <li>if(sInput.Length == 0) <li>return; <li>문자열 sResult = ""; <li>string[] aColors = new string[]{"aliceblue","antiquewith","aquamarine","azure","beige","bisque","black","blanchedalmond","blue"," blueviolet","brass",<li>"bronze","brown","burlywood","cadetblue","chartreuse","chocolate","copper","coral","cornfloewrblue","cornsilk", "시안색",<li>"darkblue","dark시안색","darkgoldenrod","darkgray","darkgreen","darkkhaki","darkmagenta","darkolivegreen","darkorchid",<li>"darkorchid", "darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink",<li>"deepskyblue","dimgray","dodgerblue","feldspar" ,"firebrick","floralwhite","forestgreen","fuchsia","gainsboro","gold","goldenrod",<li>"golenrod","gostwhite","gray","green","greenyellow ","honeydew","hotpink","indianred","inen","ivory","khaki","lavender",<li>"lavenderblush","lawngreen","lemonchiffon","lightblue"," lightcoral","light시안","lightgodenrod","lightgodenrodyellow","lightgray",<li>"lightgreen","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslateblue","lightslategray", "lightsteelblue","lightyellow",<li>"lime","limegreen","magenta","magenta","maroom","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurpul" ,<li>"mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream",<li>"mistyrose","moccasin","navajowhite","navy" ,"navyblue","oldlace","olivedrab","orange","orchid","orengered","palegodenrod",<li>"palegreen","paleturquoise","palevioletred","papayawhip","peachpuff ","페루","핑크","자두","파우더블루","보라색","석영","빨간색",<li>"rosybrown","royalblue","saddlebrown","salmon"," sandybrown","scarlet","seagreen","seashell","sienna","silver","skyblue","slategray",<li>"snow","springgreen","steelblue","tan", "엉겅퀴","토마토","청록색","보라색","보라색","밀","흰 연기","노란색","노란색 녹색"}; <li>for(int i=0;i<aColors.Length;i ){ <li>if(aColors[i].IndexOf(sInput) == 0) <li>sResult = aColors[i] ","; <li>} <li>if(sResult.Length>0) //如果有匹配项 </li> <li>sResult = sResult.Substring(0,sResult.Length-1); //去掉最后的“,”号 </li> <li>Response.Write(sResult); </li> <li>%></li> </ol></div> <em onclick="copycode($('code_JYr'));">复代码</em> </div> <p>예제 2, jQuery를 사용하여 구현. 고객: </p> <div class="blockcode"><div id="code_Vvb"><ol> <li> <li><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> </li> <li><html> </li> <li><head> </li> <li><title>jQuery는 자동 프롬프트 텍스트 상자
< 스타일>
jquery .min.js">
색상:

코드 복사

服务器端（14-10.aspx ）：

<%@ 페이지 언어="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
Response.CacheControl = "캐시 없음";
Response.AddHeader("Pragma","no-cache");
string sInput = Request["sColor"].Trim();
if(sInput.Length == 0)
return;
문자열 sResult = "";
string[] aColors = new string[]{"aliceblue","antiquewith","aquamarine","azure","beige","bisque","black","blanchedalmond","blue"," blueviolet","brass","bronze",
"brown","burlywood","cadetblue","chartreuse","chocolate","copper","coral","cornfloewrblue","cornsilk", "청록색","darkblue","dark시안색",
"darkgoldenrod","darkgray","darkgreen","darkkhaki","darkmagenta","darkolivegreen","darkorchid","darkorchid","darkornge","darkred" ,"darksalmon",
"darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink","deepskyblue","dimgray","dodgerblue",
"feldspar" ,"firebrick","floralwhite","forestgreen","fuchsia","gainsboro","gold","goldenrod","golenrod","gostwhite","gray","green",
"greenyellow ","honeydew","hotpink","indianred","inen","ivory","khaki","lavender","lavenderblush","lawngreen","lemonchiffon",
"lightblue"," lightcoral","light시안","lightgodenrod","lightgodenrodyellow","lightgray","lightgreen","lightpink","lightsalmon",
"lightseagreen","lightskyblue","lightslateblue","lightslategray", "lightsteelblue","lightyellow","lime","limegreen","magenta",
"magenta","maroom","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurpul" ,"mediumseagreen",
"mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream","mistyrose",
"moccasin","navajowhite","navy" ,"navyblue","oldlace","olivedrab","orange","orchid","orengered","palegodenrod","palegreen",
"paleturquoise","palevioletred","papayawhip","peachpuff ","페루","핑크","자두","파우더블루","보라색","석영","빨간색","rosybrown",
"royalblue","saddlebrown","연어"," sandybrown","scarlet","seagreen","seashell","sienna","silver","skyblue","slategray","snow",
"springgreen","steelblue","tan", "엉겅퀴","토마토","청록색","보라색","보라색","밀","흰 연기","노란색","노란색 녹색"};
for(int i=0;iif(aColors[i].IndexOf(sInput) == 0)
sResult = aColors[i] ",";
}
if(sResult.Length>0) //如果有匹配项
sResult = sResult.Substring(0,sResult.Length-1); //去掉最后的“,”号
Response.Write(sResult);
%>

复代代码