HTML Mobile-zmuszanie miękkiej klawiatury do ukrycia

Odpowiedź Scotta S zadziałała idealnie.

Kodowałem internetowy dialpad telefonu komórkowego i za każdym razem, gdy użytkownik naciskał numer na klawiaturze (składający się z elementów zakresu TD w tabeli), pojawiał się softkeyboard. Chciałem również, aby użytkownik nie mógł dotknąć pola wprowadzania wybieranego numeru. To faktycznie rozwiązało oba problemy w 1 strzale.

<input type="text" id="phone-number" onfocus="blur();" />

Dla dalszych czytelników/poszukiwaczy:

Jako Rene Pot zwraca uwagę na ten temat ,

Ustawiając pole wprowadzania na readonly="true" Należy zapobiec każdy wpisując cokolwiek w nim, ale nadal być w stanie uruchomić kliknięcie wydarzenie na nim.

Dzięki tej metodzie można uniknąć wyświetlania "miękkiej" klawiatury i nadal uruchamiać zdarzenia kliknięć / wypełniać dane wejściowe dowolną klawiaturą ekranową.

To rozwiązanie działa również dobrze z date-time-pickers, które na ogół już wdrożyć kontrole.

Przykład jak to zrobiłem, po wypełnieniu maksymalnej długości będzie rozmazywać się z mojego Pole (a klawiatura zniknie), jeśli masz więcej niż jedno pole, możesz po prostu dodać linię, którą dodaję ' / / '

var MaxLength = 8;
    $(document).ready(function () {
        $('#MyTB').keyup(function () {
            if ($(this).val().length >= MaxLength) {
               $('#MyTB').blur();
             //  $('#MyTB2').focus();
         }
          }); });

Te odpowiedzi nie są złe, ale są ograniczone, ponieważ nie pozwalają na wprowadzanie danych. Mieliśmy podobny problem, gdy używaliśmy czytników kodów kreskowych do wprowadzania danych do pola, ale chcieliśmy wyłączyć klawiaturę.

To właśnie poskładałem, działa całkiem nieźle:

Https://codepen.io/bobjase/pen/QrQQvd/

<!-- must be a select box with no children to suppress the keyboard -->
input: <select id="hiddenField" /> 
<span id="fakecursor" />

<input type="text" readonly="readonly" id="visibleField" />
<div id="cursorMeasuringDiv" />

#hiddenField {
  height:17px; 
  width:1px;
  position:absolute;
  margin-left:3px;
  margin-top:2px;
  border:none;
  border-width:0px 0px 0px 1px;
}

#cursorMeasuringDiv {
  position:absolute;
  visibility:hidden;
  margin:0px;
  padding:0px;
}

#hiddenField:focus {
  border:1px solid gray;  
  border-width:0px 0px 0px 1px;
  outline:none;
  animation-name: cursor;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes cursor {
    from {opacity:0;}
    to {opacity:1;}
}

// whenever the visible field gets focused
$("#visibleField").bind("focus", function(e) {
  // silently shift the focus to the hidden select box
  $("#hiddenField").focus();
  $("#cursorMeasuringDiv").css("font", $("#visibleField").css("font"));
});

// whenever the user types on his keyboard in the select box
// which is natively supported for jumping to an <option>
$("#hiddenField").bind("keypress",function(e) {
  // get the current value of the readonly field
  var currentValue = $("#visibleField").val();

  // and append the key the user pressed into that field
  $("#visibleField").val(currentValue + e.key);
  $("#cursorMeasuringDiv").text(currentValue + e.key);

  // measure the width of the cursor offset
  var offset = 3;
  var textWidth = $("#cursorMeasuringDiv").width();
  $("#hiddenField").css("marginLeft",Math.min(offset+textWidth,$("#visibleField").width()));

});

Po kliknięciu w pole <input> symuluje kursor w tym polu, ale naprawdę kładzie nacisk na puste pole <select>. Pola wyboru w naturalny sposób pozwalają naciskom klawiszy obsługiwać przeskakiwanie do elementu na liście, więc chodziło tylko o przekierowanie naciśnięcia klawisza do oryginalnego wejścia i przesunięcie symulowanego kursora.

To nie zadziała dla backspace, delete itp... ale nie potrzebowaliśmy ich. Prawdopodobnie możesz użyć wyzwalacza jQuery, aby wysłać Zdarzenie klawiatury bezpośrednio do innego pola wejściowego, ale nie musieliśmy się tym przejmować, więc tego nie zrobiłem.

Nie mogłem użyć niektórych z podanych sugestii.

W moim przypadku Google Chrome był używany do wyświetlania aplikacji Oracle APEX. Było kilka bardzo specyficznych pól wejściowych, które pozwalały na rozpoczęcie pisania wartości, a lista wartości zaczęła być wyświetlana i zmniejszana, gdy stawałeś się bardziej konkretny w pisaniu. Po wybraniu elementu z listy dostępnych opcji, fokus nadal będzie znajdował się na polu wprowadzania.

Odkryłem, że moje rozwiązanie było łatwe realizowane za pomocą zdarzenia niestandardowego, które wyrzuca błąd niestandardowy w następujący sposób:

throw "throwing a custom error exits input and hides keyboard";