When the H5 page on the mobile terminal gets the focus on the input box, it is forbidden to invoke the keyboard

mobile terminal

Achievement effect :
When the input input box gets the focus, the virtual keyboard of the mobile phone is not allowed to pop up while the cursor is kept When you click the start time or end time, a date selector will pop up. At this time, if you watch it on your mobile phone, the keyboard will be triggered at the same time, causing the keyboard to pop up. After searching for a long time on the Internet, I finally found a solution that meets my business needs. I use It is written in native html+jquery, and the implementation method is as follows:


insert image description here

<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript">
 function stopKeyborad(obj) {
      
      
     obj.attr('readonly', 'readonly');
     setTimeout(function () {
      
      
         obj.removeAttr('readonly');
     }, 200);
 }
</script>

If it is written in vue, use the following method:

<input type="password"   @focus="stopKeyborad">
stopKeyborad () {
    
    
  this.$refs.scanTextbox.setAttribute('readonly', 'readonly');
  setTimeout(() => {
    
    
    this.$refs.scanTextbox.removeAttribute('readonly');
  }, 200);
}

When you're done writing, you won't wake up your phone's keyboard again!

Guess you like

Origin blog.csdn.net/pink_cz/article/details/128420357