|
두 가지 자동 프롬프트 텍스트 상자 효과를 위한 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></head> </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);
- %>
|
