Клавиши захвата, введенные на виртуальную клавиатуру Android, используя javascript

Ответ 1

К сожалению, похоже, вы не можете много сделать здесь. Событие Keypress устарело, поэтому не запускается. 229 на клавиатуре и клавиатуре указывает, что буфер клавиатуры занят. Причина - когда вы нажимаете клавишу - на вход все еще не гарантируется то, что пользователь нажал, из-за автоматического предложения и других событий, которые могут сразу последовать за событием. Хотя, на мой взгляд, было бы лучше сначала отправить ключ, а затем запустить другое событие, возможно, на авто, чтобы вы могли действовать по отдельности...

Единственное, о чем я сейчас знаю, - это привязать к ним - keydown и keyup, сохранить значение при keydown, получить значение на клавиатуре и найти дельта, который является тем, что нажал пользователь. К сожалению, это не будет работать для элементов управления без ввода (например, тела или что-то в этом роде). Возможно, не то, что вы хотите услышать, как ответ, но все же.

Ответ 2

Я столкнулся с той же проблемой. Несколько объяснений есть, но, как ни странно, решение не предлагается. На данный момент я решил это, захватив oninput событие.

"Это событие похоже на событие onchange. Разница заключается в том, что событие oninput происходит сразу после изменения значения элемента, в то время как onchange происходит, когда элемент теряет фокус после того, как содержимое было изменено"

Это событие также поддерживает вставленный текст, вставляя текст или исправления и предложения.

это не дает мне идеального решения, потому что я могу манипулировать текстом ПОСЛЕ того, как он был введен, но на данный момент это лучшее, что у меня есть.

Если у кого-то есть лучшее решение, я буду рад услышать об этом.

Ответ 3

просто проверьте свои входные символы keyCode, если это 0 или 229, то вот функция getKeyCode(), которая использует charCodeAt JS для возврата KeyCode, который принимает ввод введите параметр и верните код ключа последнего символа.

<script>
        var getKeyCode = function (str) {
            return str.charCodeAt(str.length);
        }


        $('#myTextfield').on('keyup',function(e){

            //for android chrome keycode fix
            if (navigator.userAgent.match(/Android/i)) {

                var inputValue = this.value;

                var charKeyCode = e.keyCode || e.which;
                if (charKeyCode == 0 || charKeyCode == 229) { 
                    charKeyCode = getKeyCode(inputValue);
                    alert(charKeyCode+' key Pressed');
                }else{
                   alert(charKeyCode+' key Pressed');
                    }
            }       
        });
    </script>

Ответ 4

Я столкнулся с этим обсуждением, проводя исследования для проекта, над которым я работал. Мне пришлось создавать макеты ввода для мобильного приложения, а ответ Павла Дончева заставлял меня думать о том, что можно было бы запечатлеть в Android. В моем конкретном проекте keydown и keyup недостаточно, потому что событие keyup запускается только после того, как ключ выпущен, поэтому он будет подразумевать позднюю проверку, поэтому я сделал еще несколько исследований (и много проб и ошибок) с входными событиями и заставил его работать.

var input = document.getElementById('credit-card-mask'),
    oldValue,
    newValue,
    difference = function(value1, value2) {
      var output = [];
      for(i = 0; i < value2.length; i++) {
        if(value1[i] !== value2[i]) {
          output.push(value2[i]);
        }
      }
      return output.join("");
    },
    keyDownHandler = function(e) {
      oldValue = input.value;
      document.getElementById("onkeydown-result").innerHTML = input.value;
    },
    inputHandler = function(e) {
      newValue = input.value;
      document.getElementById("oninput-result").innerHTML = input.value;
      document.getElementById("typedvalue-result").innerHTML = difference(oldValue, newValue);
    }
;

input.addEventListener('keydown', keyDownHandler);
input.addEventListener('input', inputHandler);

<input type="text" id="credit-card-mask" />
<div id="result">
  <h4>on keydown value</h4>
  <div id="onkeydown-result"></div>
  <h4>on input value</h4>
  <div id="oninput-result"></div>
  <h4>typed value</h4>
  <div id="typedvalue-result"></div>
</div>

Ответ 5

Существует событие textInput, которое дает введенный символ

const inputField = document.getElementById('wanted-input-field');

inputField.addEventListener('textInput', function(e) {
    // e.data will be the 1:1 input you done
    const char = e.data; // In our example = "a"

    // If you want the keyCode..
    const keyCode = char.charCodeAt(0); // a = 97

    // Stop processing if "a" is pressed
    if (keyCode === 97) {
        e.preventDefault();
        return false;
    }
    return true;
});

Ответ 6

Я ИЗОБРАЖАЛ!!

Здесь работает 100% -ное рабочее решение, которое работает ВСЕГДА с КАЖДОЙ функцией, включая даже предложения emoji на iOS и любой вставной контент. Я использую сравнение подстроки, чтобы найти фактический материал, который изменился с onInput на onInput.

Указаны точки, из которых удаляется текст и из которого он вставляется.

Оценка и выбор в качестве ответа оцениваются.

var x = document.getElementById("area"),
    text = x.value,
    event_count = 0



function find_Entered_And_Removed_Substrings(
    previous_string, current_string, pos
) {
    let
        right_pos = pos,
        right_boundary_of_removed =
            previous_string.length -
            (
                current_string.length -
                pos
            ),
        left_max_pos = Math.min(
            pos,
            right_boundary_of_removed
        ),
        left_pos = left_max_pos

    for (
        let x = 0; x < left_max_pos; x++
    ) {
        if (
            previous_string[x] !==
            current_string[x]
        ) {
            left_pos = x
            break
        }
    }


    return {
        left: left_pos,
        right: pos,
        removed_left: left_pos,
        removed_right: right_boundary_of_removed
    }
}

x.oninput =
    (e) => {
        // debugger;
        let
            cur_text = x.value,
            positions =
                find_Entered_And_Removed_Substrings(
                    text, cur_text, Math.max(
                        x.selectionStart, x.selectionEnd
                    )
                )
        console.log(positions)
        let
            entered =
                cur_text.substring(
                    positions.left, positions.right
                ),
            removed =
                text.substring(
                    positions.removed_left, positions.removed_right
                )


        if (
            entered.length >
            0 ||
            removed.length >
            0
        ) {
            document.getElementById("entered")
                .innerHTML +=
                entered

            document.getElementById("removed")
                .innerHTML +=
                removed

            document.getElementById("events")
                .innerHTML =
                event_count++
        }


        text = cur_text
    }

<textarea id="area"></textarea>
<br/>
<pre id="entered"></pre>
<br/>
<div id="events"></div>
<pre id="removed"></pre>