截取输入输入

Question

有没有办法在用户输入的值出现在元素中之前就截取它？我尝试使用Object.defineProperty，但它似乎不适用于InputElement.value，因为

var value;
Object.defineProperty($('input')[0], 'value', {
    get: function() {return value},
    set: function(val) {console.log(val); value = val;}
});

似乎不会改变任何行为。或者oninput/onchange是唯一的选择？因为我更希望我的代码在浏览器之前执行。

http://jsfiddle.net/zpmu1xcu/

Answer 1

如果要在浏览器输入文本之前检测输入，可以使用Element.onkeydown属性。在浏览器解释操作之前，只要按下该键，就会触发此事件。

​

var demo_i = document.getElementById('demo_i');
var demo_d = document.getElementById('demo_d');

demo_i.onkeydown = function(e) {
    demo_d.textContent = e.which;
    // Returning false stops the event from going any further
    return false;
}

<input id="demo_i"><div id="demo_d"></div>

​

Answer 2

这就是你要找的东西吗？

​

function InterceptInputValue($input) {
  var value = $input.val();
  // intercept value that changes and saved to value variable
  $input.keydown(function(e) {
    value += String.fromCharCode(e.keyCode);
    return false;
  });

  this.getValue = function() {
    return value;
  };
}

var i = new InterceptInputValue($("input"));

$("input").blur(function() {
  alert('input value is: ' + i.getValue());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">

​

Answer 3

我想你唯一的选择就是keyup。

它是唯一一个可以捕获数据而不会留下任何数据的服务器。

使用下面的代码片段，在每个文本框中输入测试。

代码尝试在每次击键时将该值重置为空白。

keyup是唯一一个可以删除每个笔划输入的工具。

一旦您离开该字段，keydown将清除键入的最后一个字符。

keypress会将键入的最后一个字符保留在input字段中

​

var tbxKeyDown = document.getElementById('tbxKeyDown');
var tbxKeyUp = document.getElementById('tbxKeyUp');
var tbxKeyPress = document.getElementById('tbxKeyPress');

// [Jedi mind trick] ==> you entered nothing

tbxKeyDown.addEventListener('keydown', testKeyDown, false);
tbxKeyUp.addEventListener('keyup', testKeyUp, false);
tbxKeyPress.addEventListener('keypress', testKeyPress, false);

// Remove anything entered

function testKeyDown() {
  tbxKeyDown.value = '';
}

function testKeyPress() {
  tbxKeyPress.value = '';
}

function testKeyUp() {
  tbxKeyUp.value = '';
}

KeyDown  = <input type="text" id="tbxKeyDown"  value="" />

<br/><br/>

KeyUp    = <input type="text" id="tbxKeyUp"    value="" />

<br/><br/>

KeyPress = <input type="text" id="tbxKeyPress" value="" />

​