> 백엔드 개발 > PHP 튜토리얼 > Js는 자동 프롬프트로 텍스트 상자 효과를 구현합니다.

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

WBOY
풀어 주다: 2016-07-25 09:12:45
원래의
1247명이 탐색했습니다.

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

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

  1. 자동 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는 자동 프롬프트 텍스트 상자
  2. < 스타일>
  3. jquery .min.js">
  4. 색상:
  • 코드 복사
  • 服务器端(14-10.aspx ):

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


  • 원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿