HTML Mobile - принудительная скрытая клавиатура

Ответ 1

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

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

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

Ответ 2

Ответ Scott S отлично работал.

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

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

Ответ 3

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

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

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

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

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

Ответ 4

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

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

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 для отправки события клавиатуры напрямую в другое поле ввода, но нам не нужно было беспокоиться об этом, поэтому я этого не делал.

Ответ 5

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

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

Ответ 6

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

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

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

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

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

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

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

Ответ 7

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

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

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

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