JavaScript Special text input box Web page special effects _javascript Tips

Source: Internet
Author: User
Tags border color text dom uppercase letter

This example for you to share the Special JS text input box Web effects, for your reference, the specific content as follows

instance one: make the text box underlined only

<script type= "Text/javascript" >           
  function Changetextstyle () {       //Make text box underlined
    //Get the text box Dom
    var MyText = document.getElementById ("MyText");           
    MyText.style.borderColor = ' black ';   Set border color
    MyText.style.borderStyle = ' solid ';   Set border style to solid line
    myText.style.borderWidth = ' 0 0 1px 0 ';//set border size, 0 represents no
  }
</script>

Example two: initials or all uppercase letters

<script type= "Text/javascript" >     
      //Format checksum
      function ValidateInput () {
        //Get the DOM var myText1 of the text box
        = document.getElementById ("MyText1");
        var myText2 = document.getElementById ("MyText2");
        var val1 = Mytext1.value;      Value of text box 1
        var val2 = mytext2.value;      Value of text box 2
        var errmsg = ';          Define the error prompt character
        //To determine whether to start with an uppercase letter if
        (Val1!= ' && (Val1.charat (0) > ' Z ' | | val1.charat (0) < ' A ')) {
          Stitching error character
          errmsg = ' First Letter of text box 1 requires uppercase \ n '
          ; alert (errmsg);
        }
        if (val2!= ' &&!/\b[a-z]+\b/.test (val2)) {
          //Stitching error characters
          errmsg = ' text box 2 needs all uppercase letters \ n ';
          alert (errmsg);
        }
      }
</script>

example Three: a text box that can only enter numbers

<script type= "Text/javascript" >     
      //Format checksum
      function ValidateInput () {
        //Get the DOM var myText of the text box
        = document.getElementById ("MyText");
        var val = mytext.value;     Gets the user-entered value
        if (!/\b[0-9]+\b/.test (val)) {    //Use regular checksum
          alert (' only enter Number ');      Prompt error message
        }
</script>

example four: validating an email format with regular expressions

<script type= "Text/javascript" >     
      //Format checksum
      function ValidateInput () {
        //Get the DOM var myText of the text box
        = document.getElementById ("MyText");
        var email = mytext.value;  Get user Input Email
        //define Regular expression
        var emailreg 
          =/^ ([a-za-z0-9_-]) +@ ([a-za-z0-9_-]) + ((\.[ a-za-z0-9_-]{2,3}) {1,2}) $/;
        if (emailreg.test (email)) {  //To determine if the format required
          alert ("Calibration pass, allow submission");   Through
        }else{
          alert ("Verify failed, check reenter");//validation failed
        }
      }
</script>

instance Five: Clear text box contents when focus

<script type= "Text/javascript" >     
      //clear content
      function ClearContent (myText) {
        mytext.value = ';   Set the value of the text content to the null character
      }
</script>


<input type= "text" value= "onfocus=" clearcontent (this)/>

Example six: immediately after the user entered the format check

<script type= "Text/javascript" >           
  function Validatetel () {       //format checksum/
    /Get the text box dom
    var Mytel = document.getElementById ("Mytel");
    var val = mytel.value;     Gets the user-entered value
    if (!/\b[0-9]+\b/.test (val)) {      //Use regular checksum
      alert (' only enter Number ');      Prompt for error messages
      //modify styles, causing attention
      MyTel.style.border = ' 1px solid red ';
    } else if (Val.length!=) {     //length must be 11-bit
      alert (' Mobile number is 11-bit ');   Prompt for error messages
      //modify styles, causing attention
      MyTel.style.border = ' 1px solid red ';
    } else{
      //modified style, indicated through the
      MyTel.style.border = ' 1px solid green ';
      return true;
    }
</script>


<input type= "text" value= "id=" Mytel "onblur=" Validatetel () "/>

instance Seven: The text box border flashes when you enter text

Onfocus () and onblur () are best written in pairs!

<script type= "Text/javascript" >     
  //initialization functions function
  init () {
    //Get all text dom        
    var texts = document.getElementsByTagName (' input ');
    Iterate through all the text boxes for
    (Var i=0;i<texts.length;i++) {
      var t = texts[i];//current text box
      var timer;
      Listener Focus Event
      T.onfocus = function () {
        var e = this;//Keep reference to current DOM
        //Start flashing timer Timer
        = setinterval ( function () {
          //Get the current border color variable
          var c = e.style.bordercolor;
          if (c = = ' yellow ') {//If the yellow
            e.style.bordercolor = ';//restore primary color
          }else{//Otherwise, the border becomes yellow
            e.style.bordercolor = ' Yellow ';
          }
        },1000);//flashing every 1 seconds
      };
      T.onblur = function () {//Monitor departure event
        //restore border color
        t.style.bordercolor = ';
        Clearinterval (timer);//Clear Timer}}}
</script>

<body style= "Text-align:center;" Onload= "Init ();" >

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.