如何onkeypress事件中得到一个输入文本框的文本？

问题描述 投票：74回答：11

我试图让一个文本框中为它的用户类型（jsfiddle playground）全文：

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;

    //var s = $("#edValue").val();
    //$("#lblValue").text(s);    
}
<input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

代码运行没有错误，只是input text箱onKeyPress过程中的价值，永远是变化前值：

问：我如何onKeyPress期间得到一个文本框的文本？

奖金颤振

有与在HTML DOM“用户键入”三件大事：

  • onKeyDown
  • onKeyPress
  • onKeyUp

在Windows中，当用户按下一个键，键开始重复WM_Key消息的顺序变得很重要：

  • WM_KEYDOWN('a') - 用户按下A键
  • WM_CHAR('a') - 一个a角色已经从用户接收
  • WM_CHAR('a') - 一个a角色已经从用户接收
  • WM_CHAR('a') - 一个a角色已经从用户接收
  • WM_CHAR('a') - 一个a角色已经从用户接收
  • WM_CHAR('a') - 一个a角色已经从用户接收
  • WM_KEYUP('a') - 用户发布了一个关键

将导致出现在文本控制五个大字：aaaaa

最重要的一点是，该你了WM_CHAR消息，即重复一个回应。否则，当你按下一个键错过的事件。

在HTML的事情略有不同：

  • onKeyDown
  • onKeyPress
  • onKeyDown
  • onKeyPress
  • onKeyDown
  • onKeyPress
  • onKeyDown
  • onKeyPress
  • onKeyDown
  • onKeyPress
  • onKeyUp

HTML提供了一个KeyDown和KeyPress每个按键重复。而当用户释放键KeyUp事件，才会引发。

就拿赠品

  • 我可以回应onKeyDown或onKeyPress，但input.value已经更新之前都还上调
  • 我不能回应onKeyUp，因为它不会发生，因为在文本框中修改文本。

问：我如何onKeyPress期间获得一个文本框的文本？

奖金阅读

javascript html input onkeypress
11个回答
9
投票

处理input事件是一致的解决方案：它是在所有的浏览器当代和supported元素textarea和input触发它究竟当你需要它：

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;
}
<input id="edValue" type="text" onInput="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

我想这改写了一下，虽然：

function showCurrentValue(event)
{
    const value = event.target.value;
    document.getElementById("lblValue").innerText = value;
}
<input id="edValue" type="text" onInput="showCurrentValue(event)"><br>
The text box contains: <span id="lblValue"></span>
1
投票

通过使用event.key我们可以得到值之前进入HTML文本输入框。下面是代码。

function checkText()
{
  console.log("Value Entered which was prevented was - " + event.key);
  
  //Following will prevent displaying value on textbox
  //You need to use your validation functions here and return value true or false.
  return false;
}
<input type="text" placeholder="Enter Value" onkeypress="return checkText()" />
0
投票

尝试以连接事件则charCode到你的价值。这里是我的代码示例：

<input type="text" name="price" onkeypress="return (cnum(event,this))" maxlength="10">
<p id="demo"></p>

JS：

function cnum(event, str) {
    var a = event.charCode;
    var ab = str.value + String.fromCharCode(a);
    document.getElementById('demo').innerHTML = ab;
}

在ab的价值将得到输入领域的最新值。

53
投票

把事情简单化。同时使用onKeyPress()和onKeyUp()：

<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">

该负责获取最新的字符串值（后键上）和另外如果用户按住一个键更新。

的jsfiddle：http://jsfiddle.net/VDd6C/8/

19
投票

输入文本框，onkeypress事件中的值总是变化前值

这是有意的：这让事件侦听器取消按键。

如果事件监听器cancels the event，不更新的价值。如果不取消的情况下，该值被更新，但事件侦听器被调用后。

要获取值的字段值已被更新后，安排到下一个事件循环运行功能。通常的方式做，这是调用setTimeout与0的超时：

$('#field').keyup(function() {
    var $field = $(this);

    // this is the value before the keypress
    var beforeVal = $field.val();

    setTimeout(function() {

        // this is the value after the keypress
        var afterVal = $field.val();
    }, 0);
});

试一下：http://jsfiddle.net/Q57gY/2/

编辑：一些浏览器（如Chrome浏览器）不会触发退格按键事件;改变按键在代码中KEYUP。

5
投票

保持紧凑。 每按一个键，功能edValueKeyPress()被调用。 你还声明并初始化该函数一些变量 - 而减慢的过程，需要更多的CPU和内存。 你可以简单地使用此代码 - 从简单的取代而获得。

function edValueKeyPress()
{
    document.getElementById("lblValue").innerText =""+document.getElementById("edValue").value;
}

这就是你想要的，而且它的速度更快！

3
投票
<asp:TextBox ID="txtMobile" runat="server" CssClass="form-control" style="width:92%;  margin:0px 5px 0px 5px;" onkeypress="javascript:return isNumberKey(event);" MaxLength="12"></asp:TextBox>

<script>
    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        return true;
    }
</script>
3
投票

答案都不到目前为止提供了一个完整的解决方案。有相当多，以解决几个问题：

  1. 不是所有的按键被传递到keydown和keypress处理程序（例如退格键和删除键由某些浏览器被抑制）。
  2. 处理keydown是不是一个好主意。在有些情况下一个的keydown不会导致一个按键的情况下！
  3. 直到用户停止输入setTimeout()风格的解决方案获得下谷歌浏览器/眨眼网页浏览器延迟。
  4. 鼠标和触摸事件可用于执行诸如剪切，复制和粘贴操作。这些事件不会触发键盘事件。
  5. 浏览器中，根据输入的方法，可能无法提供通知该元素已改变，直到用户导航从现场远。

更正确的解决方案将处理keypress，keyup，input和change事件。

例：

<p><input id="editvalue" type="text"></p>
<p>The text box contains: <span id="labelvalue"></span></p>

<script>
function UpdateDisplay()
{
    var inputelem = document.getElementById("editvalue");
    var s = inputelem.value;

    var labelelem = document.getElementById("labelvalue");
    labelelem.innerText = s;
}

// Initial update.
UpdateDisplay();

// Register event handlers.
var inputelem = document.getElementById("editvalue");
inputelem.addEventListener('keypress', UpdateDisplay);
inputelem.addEventListener('keyup', UpdateDisplay);
inputelem.addEventListener('input', UpdateDisplay);
inputelem.addEventListener('change', UpdateDisplay);
</script>

小提琴：

http://jsfiddle.net/VDd6C/2175/

处理所有四场比赛所有的边缘情况捕获。当来自用户的输入工作时，所有类型的输入方法应考虑和跨浏览器和跨设备功能应该进行验证。上面的代码已经在Firefox，边缘和Chrome过测试的桌面以及我自己的移动设备。

1
投票

我通常与关键事件相关联的密钥串连字段的值（它的更新，即前）。下面以最近的JS所以需要调整为中老年IE的支持。

最近的例子JS

document.querySelector('#test').addEventListener('keypress', function(evt) {
    var real_val = this.value + String.fromCharCode(evt.which);
    if (evt.which == 8) real_val = real_val.substr(0, real_val.length - 2);
    alert(real_val);
}, false);

对老年人的IE例如支持

//get field
var field = document.getElementById('test');

//bind, somehow
if (window.addEventListener)
    field.addEventListener('keypress', keypress_cb, false);
else
    field.attachEvent('onkeypress', keypress_cb);

//callback
function keypress_cb(evt) {
    evt = evt || window.event;
    var code = evt.which || evt.keyCode,
        real_val = this.value + String.fromCharCode(code);
    if (code == 8) real_val = real_val.substr(0, real_val.length - 2);
}

[编辑 - 这种做法，在默认情况下，禁用之类的后排空间，CTRL + A按键。上面的代码为容纳前者，但将进一步需要修修补补允许后者，和其他一些不测事件。见下面伊恩·博伊德的评论]

1
投票

简单...

在你的按键事件处理函数，写

void ValidateKeyPressHandler(object sender, KeyPressEventArgs e)
{
    var tb = sender as TextBox;
    var startPos = tb.SelectionStart;
    var selLen= tb.SelectionLength;

    var afterEditValue = tb.Text.Remove(startPos, selLen)
                .Insert(startPos, e.KeyChar.ToString()); 
    //  ... more here
}
1
投票

因此，有优点和缺点每个事件。事件onkeypress和onkeydown不检索最新值，onkeypress不火的在某些浏览器非打印字符。当一个键被按下多个字符的onkeyup事件不会察觉。

这是一个小哈克，但做这样的事情

function edValueKeyDown(input) {
    var s = input.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: "+s;

    //var s = $("#edValue").val();
    //$("#lblValue").text(s);    
}

<input id="edValue" type="text" onkeydown="setTimeout(edValueKeyDown, 0, this)" />

似乎来处理世界上最好的。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.