HTML Mobile - принудительное скрытие программной клавиатуры

Поскольку программная клавиатура является частью ОС, чаще всего скрыть ее не получится — также в iOS скрытие клавиатуры сбрасывает фокус с элемента.

Однако, если вы используете атрибут onFocus для ввода, а затем blur() для ввода текста немедленно, клавиатура скроется, а событие onFocus может установить переменную, чтобы определить, какой текст был сфокусирован последним.

Затем измените клавиатуру на странице, чтобы изменить ввод текста только с последним фокусом (проверьте с помощью переменной), а не имитировать нажатие клавиши.

Ответ Скотта С. сработал отлично.

Я кодировал телефонную веб-панель для мобильных устройств, и каждый раз, когда пользователь нажимал номер на клавиатуре (состоящий из элементов td span в таблице), всплывала экранная клавиатура. Я также хотел, чтобы пользователь не мог нажать на поле ввода набираемого номера. Это фактически решило обе проблемы одним выстрелом. Было использовано следующее:

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

Для дальнейших читателей/искателей:

Как указывает Рене Пот на эта тема,

Добавив атрибут readonly (или readonly="readonly") в поле ввода, вы должны запретить кому-либо что-либо вводить в него, но при этом иметь возможность запускать в нем событие щелчка.

С помощью этого метода вы можете избежать появления «мягкой» клавиатуры и по-прежнему запускать события щелчка / заполнять ввод любой экранной клавиатурой.

Это решение также отлично работает со средствами выбора даты и времени, которые обычно уже реализуют элементы управления.

Эти ответы неплохие, но они ограничены тем, что на самом деле не позволяют вам вводить данные. У нас была похожая проблема, когда мы использовали считыватели штрих-кода для ввода данных в поле, но мы хотели подавить клавиатуру.

Это то, что я собрал, это работает очень хорошо:

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()));

});

Когда вы щелкаете в поле <input>, он имитирует курсор в этом поле, но на самом деле фокус перемещается на пустое поле <select>. Поля выбора, естественно, позволяют нажатиям клавиш поддерживать переход к элементу в списке, поэтому нужно было только перенаправить нажатие клавиши на исходный ввод и сместить смоделированный курсор.

Это не будет работать для возврата, удаления и т. д., но нам это не нужно. Вероятно, вы могли бы использовать триггер jQuery для отправки события клавиатуры непосредственно в другое поле ввода куда-нибудь, но нам не нужно было заморачиваться с этим, поэтому я этого не делал.

пример того, как я это сделал. После того, как я заполню максимальную длину, она будет размыта из моего поля (и клавиатура исчезнет), если у вас более одного поля, вы можете просто добавить строку, которую я добавляю '//'

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

Я очень смущен тем, почему никто не поставил это ... может быть, я неправильно понимаю вопрос, но,

<input inputmode="none" />

Я столкнулся с той же проблемой, я могу скрыть клавиатуру Android, даже если фокус находится в текстовом поле, просто добавив одно свойство css

<input type="text" style="pointer-events:none" />

и работает нормально...

Я не мог использовать некоторые из предложенных предложений.

В моем случае Google Chrome использовался для отображения приложения Oracle APEX. Были некоторые очень специфические поля ввода, которые позволяли вам начать вводить значение, и список значений начинал отображаться и сокращался по мере того, как вы становились более конкретными при вводе. После того, как вы выберете элемент из списка доступных параметров, фокус по-прежнему будет находиться в поле ввода.

Я обнаружил, что мое решение было легко реализовано с помощью пользовательского события, которое выдает пользовательскую ошибку, подобную следующей:

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

Борюсь с программной клавиатурой на Honeywell Dolphin 70e с Android 4.0.3. Мне не нужна клавиатура, потому что ввод поступает от встроенного считывателя штрих-кода через «сканирующий клин», настроенный на генерацию ключевых событий.

Я обнаружил, что трюк, описанный в более ранних ответах:

input.blur();
input.focus();

работает, но только один раз, прямо при инициализации страницы. Он помещает фокус в элемент ввода, не показывая программную клавиатуру. Это НЕ работает позже, например. после символа TAB в суффиксе штрих-кода вызывает событие onblur или oninput для элемента ввода.

Для чтения и обработки большого количества штрих-кодов вы можете использовать постфикс, отличный от TAB (9), например. 8, который не интерпретируется браузером. В событии input.keydown используйте e.keyCode == 8, чтобы определить полный штрих-код для обработки.

Таким образом, вы инициализируете страницу с фокусом на элементе ввода, со скрытой клавиатурой, все штрих-коды переходят к элементу ввода, и фокус никогда не покидает этот элемент. Конечно, на странице не может быть других элементов ввода (например, кнопок), потому что тогда вы не сможете вернуться к элементу ввода штрих-кода со скрытой программной клавиатурой.

Возможно, перезагрузка страницы после нажатия кнопки может скрыть клавиатуру. Поэтому используйте ajax для быстрой обработки штрих-кодов и используйте обычную кнопку asp.net с PostBack для обработки нажатия кнопки и перезагрузки страницы, чтобы вернуть фокус на ввод штрих-кода со скрытой клавиатурой.

Это может помочь другим, которые просто хотят вообще отключить программную клавиатуру. Мне удалось отключить программную клавиатуру не с помощью javascript, а путем установки новой раскладки клавиатуры под названием Нулевая клавиатура