이 기사에서는 참조를 위해 특수 JS 텍스트 입력 상자 웹 페이지의 특수 효과를 공유했습니다. 특정 내용은 다음과 같습니다
예 1 : 텍스트 상자에 밑줄 만 있으면됩니다
<script type = "text/javaScript"> function changetextStyle () {// 텍스트 상자에 탁월한 밑줄 만 쌓아 올리게합니다. // 텍스트 상자의 dom var mytext = document.getElementById ( "myText"); mytext.style.bordercolor = 'black'; // 테두리 색상 색상 mytext.style.borderstyle = 'solid'를 설정합니다. // 테두리 스타일을 실선으로 설정합니다 mytext.style.borderwidth = '0 1px 0'; // 테두리 크기를 설정하고 0은 no} </script>를 의미합니다예제 2 : 첫 글자 또는 모든 문자가 대문자
<script type = "text/javaScript"> // 형식 확인 함수 validateInput () {// 텍스트의 dom을 가져옵니다. var mytext1 = document.getElementById ( "myText1"); var mytext2 = document.getElementById ( "myText2"); var val1 = mytext1.Value; // 텍스트 상자 값 1 var val2 = mytext2.value; // 텍스트 상자 2 var errmsg = ''; // 오류 프롬프트 문자 정의 // (val1! = '&& (val1.charat (0)>'z '|| val1.carat (0) a')) {// split error errmsg = '텍스트 상자의 첫 번째 문자 1은 대문자/n'; 경고 (errmsg); } if (val2! = '&&! // b [az]+/b/.test (val2)) {// 분할 오류 errmsg ='텍스트 상자 2의 첫 글자는 대문자/n '; 경고 (errmsg); }} </script>예 3 : 숫자 만 입력 할 수있는 텍스트 상자
<script type = "text/javaScript"> // 형식 확인 함수 validateInput () {// 텍스트의 dom을 가져옵니다. var mytext = document.getElementById ( "myText"); var val = mytext.value; // 사용자가 입력 한 값을 가져 오십시오. // 팁 오류 메시지}} </script>예 4 : 정규식으로 이메일 형식을 확인하십시오
<script type = "text/javaScript"> // 형식 확인 함수 validateInput () {// 텍스트의 dom을 가져옵니다. var mytext = document.getElementById ( "myText"); var email = mytext.value; // 사용자가 이메일 입력을 얻습니다. // 정규 표현식 정의 var var emailreg = /^ (a-za-z0-9_- ]) +@(십시오 a-za-z0-9_- ]))) +(/. if (emailreg.test (email)) {// 형식 요구 사항 경고를 충족하는지 판단합니다 ( "인증이 전달되고 제출이 허용됩니다"); // pass} else {alert ( "실패, 다시 입력하기 위해 확인하십시오"); // 확인 실패}}} </script>예 5 : 초점이 될 때 텍스트 상자 내용을 지우십시오.
<script type = "text/javaScript"> // CLEAR CLEAR CONTER CLEARCONTENT (myText) {mytext.value = ''; // 텍스트 내용의 값을 null 문자로 설정} </script> <입력 유형 = "text"value = ""onfocus = "clearContent (this)"/>예 6 : 사용자가 즉시 형식 검사를 입력 한 후
<script type = "text/javaScript"> function validateTel () {// 형식 verification // 텍스트 상자의 dom var var mytel = document.getElementById ( "mytel"); var val = mytel.value; // 사용자가 입력 한 값을 가져 오십시오. // 프롬프트 오류 메시지 // 스타일을 수정하고 관심을 끌고 관심을 끌고 Mytel.style.border = '1px solid red'; } else if (val.length! = 11) {// 길이는 11 비트 경고 여야합니다 ( '휴대 전화 번호는 11 비트'); // 오류 메시지 답변 // 스타일을 수정하여주의를 끌기 위해 mytel.style.border = '1px solid red'; } else {// mytel.style.border = '1px solid green'을 표시하기 위해 스타일을 수정합니다. 진실을 반환하십시오. }} </script> <입력 유형 = "text"value = ""id = "mytel"onblur = "validateTel ()"/>예 7 : 텍스트를 입력 할 때 텍스트 상자 테두리가 깜박입니다.
onfocus ()와 onblur ()를 쌍으로 작성하는 것이 가장 좋습니다!
<script type = "text/javaScript"> // 함수 기능 초기화 init () {// 모든 텍스트 가져옵니다 dom var 텍스트 = document.getElementsByTagName ( 'input'); // (var i = 0; i <texts.length; i ++) {var t = 텍스트 [i]; // 현재 텍스트 상자 var 타이머; // Supervisor Focus event t.onfocus = function () {var e = this; // 현재 dom의 참조를 유지합니다. // flash = setInterval (function () {// 현재 테두리 변수를 얻습니다. var var var var c = e.style.bordercolor; if (c == '옐로우') COLOR} else {// 그렇지 않으면 테두리가 노란색으로 변합니다. t.onblur = function () {// 휴가 이벤트에 대해 말합니다. // 경계 색상 t.style.bordercolor = ''; ClearInterVal (타이머); // 클리어 타이머}}}} </script> <body style = "text-align : center;" onload = "init ();">위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.