Wie verhindert man, dass die Tastatur auf mobilen Geräten erscheint?

Question

Ich versuche, den jQuery Spinner oben in meiner Website zu verwenden (eine Demo davon ist am Ende der API verfügbar).

Es funktioniert wirklich auf Computern, aber auf mobilen Geräten erscheint die Tastatur sehr ärgerlich jedes Mal, wenn man auf die hoch/runter Tasten klickt. Ist es möglich, dies zu verhindern? Der Spinner reagiert nicht wirklich gut auf native Funktionen wie .on ('click'), stattdessen hat er seine eigenen Funktionen.

Wie ändere ich den Code so, dass der Keybooard nur angezeigt wird, wenn auf das Textfeld geklickt wird, nicht die Auf-Ab-Tasten?

Das ist mein Versuch war, es nicht funktioniert:

$(function() { 
    $('.ui-spinner a').on('click', function() { 
     $(':focus').blur(); 
}); 

}) // Updated code, I can now see the focus being lost on desktops, but still not mobile devices 

Hinweis: Ich habe den Klassennamen durch den generierten Code Inspektion, wenn die Spinner created.Also, ich bin Super neu in Web-Entwicklung so I Ich bin mir nicht sicher, ob mir eine leichte Annäherung fehlt.

Answer 1

Wenn Sie auf die Schaltfläche klicken, wird die Eingabe Fokus, so mobile Gerät Display-Tastatur, die Lösung ist Readonly Attribut hinzufügen, wenn Benutzer klicken Sie auf Eingabefeld, entfernen Sie es, auf Unschärfe, addonly Attribut erneut.

den Code-Schnipsel sehen, zu verstehen, sorry ist mein Englisch

$("#spinner").spinner(); 
 
$("#spinner").click(function(event){ 
 
    $(this).removeAttr('readonly').select(); 
 
}); 
 
$("#spinner").blur(function(event){ 
 
    $(this).attr('readonly', 'readonly'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    
 
<input id="spinner" >

Answer 2

Sie nur das readonly Attribut hinzufügen müssen beschreiben nicht genug, um die input-Tag.

<input id="spinner" readonly> 

Answer 3

$(document).ready(function() { 
 
\t 
 
$(".spinner").spinner(); 
 
$(".spinner").click(function(event){ 
 
    $(this).removeAttr('readonly').select(); 
 

 
}); 
 
$(".spinner").blur(function(event){ 
 
    $(this).attr('readonly', 'readonly'); 
 
    
 
}); 
 
\t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 

 
    <input class="spinner" min="1" max="9" value="1" height="40px" readonly="readonly" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57">