When you enter the correct 11-digit mobile phone number, the font changes to red?

Screenshot is as follows:

clipboard.png

11:

clipboard.png

The length of

has been limited, but what if the font turns red immediately after realizing 11 as the mobile phone number? Do you really want to write a timer? Is there a better solution? 

<input id="input_phone" type="text" placeholder="" maxlength="11">
Html5 javascript
Apr.01,2021

add an onkeyup event to input, which is triggered each time the user enters a character, and the logic inside is to judge the current input box length, which is enough to set the text to turn red after the 11-bit setting.

listens to input events, and verifies the mobile phone number for the input. If the verification is passed, just switch the style class.
the following is pseudo code 

var elInput = $('-sharpinput');
var elBtn = $('-sharpbtn');
var reg = /^[1][3,4,5,7,8][0-9]{9}$/;

elInput.on('input', function() {
  var val = this.value;
  if (reg.test(val)) {
    elBtn.addClass('red');
  } else {
    elBtn.removeClass('red');
  }
});

the method of visual inspection of the first floor and the second floor is effective, mainly depends on which method the landlord wants to use, and the correctness test is attached to the second floor. There is also document.getElementById (""). AddEventListener ("keyup", function () {});

bind an input event to input, and when the input data reaches 11 bits, the button becomes clickable. 

document.querySelector('.phone').addEventListener('input', event=>{
    if( event.currentTarget.value.length>=11 ){
        alert( '' );
    }
})

Previous: Can js judge whether there is this app on the phone according to the protocol?

Next: Make some changes to the source code of the checklist component in vux, how to pull it to your own src folder to prevent it from being overwritten by npm install?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu