捕获在Android虚拟键盘上使用JavaScript键入的键

我有一个带有textarea的网页,我需要捕获用户键入的键(以便我可以用键入的键replace不同的Unicode字符)。 我目前的代码如下:

$("#myTextArea").bind('keypress', function(event) { var keyInput = event.which; // call other functions }); 

以上代码适用于PC和iPhone / Safari。 但是, 在Android (三星)平板电脑上使用Chrome时失败 。 出于某种原因,当我在android虚拟(软)键盘上键入时,不会触发“按键”事件 。 Android版本是5.0.2。

如果我尝试使用“keyUp”或“keyDown”,那么对于所有的字符 (除了返回键,空格,退格键等) 总是返回229

即使keyCode始终为229,textarea也会显示用户input的正确字符。 这意味着设备知道哪个键被input,但不知何故,我无法得到处理这个事件(和关键代码)使用JavaScript。

以下是我迄今尝试过的替代scheme及其结果:

 $("#mainTextArea").on("keydown keyup", function(event) { // event.which and event.keyCode both return 229 $(document).on('keypress', function(event) { // function is not triggered $('#myTextArea').bind('input keypress', function(event) { // comes inside function, but keyCode and which are undefined 

任何有关这个问题的帮助表示赞赏..

不幸的是,你似乎在这里做不了多less事情。 按键事件被弃用,因此不被解雇。 keyup和keydown上的229表示键盘缓冲区正忙。 原因 – 当您按下某个键时,由于自动提示和其他可能立即出现的事件并使事件失效,input仍不能保证是用户按下的。 虽然在我看来,最好先发送钥匙,然后再发动另一个事件,也许是自动提示,所以你可以单独采取行动。

我现在唯一知道的是附加到keydown和keyup上,在keydown上存储值,在keyup上获取值,并finddelta值,这是用户按下的值。 不幸的是,这不适用于非input控件(例如 – 身体或类似的东西)。 也许不是你想听到的答案,但仍然。

我遇到了同样的问题。 有几个解释,但无论如何,似乎奇怪的是没有解决scheme提供。 目前我通过捕获oninput事件来解决这个问题。

“这个事件类似于onchange事件,不同之处在于oninput事件是在元素值改变后立即发生的,而onchange是在元素失去焦点时发生的,

此事件支持插入文本,从粘贴文本或更正和build议。

它不能给我提供完美的解决scheme,因为我只能在进入之后操作文本,但是现在这是最好的解决scheme。

如果有人有更好的解决scheme,我会很高兴听到。

只要检查你的input字符keyCode,如果它是0或229,那么这里是函数getKeyCode() ,它使用JS的charCodeAt返回inputstring参数的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> 

我在为我正在研究的一个项目进行研究的同时,也遇到了这个讨论。 我不得不为移动应用程序创buildinput掩码,而Pavel Donchev的回答让我想到了可以在Android中捕获键的工具。 在我的具体项目中,keydown和keyup是不够的,因为keyup事件只是在一个key被释放后触发的,所以这意味着在后期的validation中,所以我对input事件做了一些更多的研究(以及大量的试验和错误)并得到它的工作。

 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> 

有一个textInput事件给你input的字符

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

我想到了!

这是一个百分之百的工作解决scheme,可以随时随地使用每个function,甚至包括iOS上的表情符号build议和任何粘贴的内容。 我使用子string比较来查找从onInput更改为onInput实际的东西。

指出哪些文本被删除,哪些文本被插入哪些点。

评分和select作为答案表示赞赏。

 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>