Question

我正在尝试通过输入更新value类型input元素中的text 属性。但我在{{1}中获得了双字符我第一次按一个键时发短信。为什么？提前致谢

html代码

input

javaScript代码

<input type="text" name="" value="" id="click">

＆＃13;

const input= document.getElementById('click');
var char= '';
input.addEventListener('keypress',function(e){
    var x= e.which || e.keyCode;
    char+= String.fromCharCode(x);
    input.setAttribute('value',char);
});

＆＃13;

const input= document.getElementById('click');
var char= '';
input.addEventListener('keypress',function(e){
    var x= e.which || e.keyCode;
    char+= String.fromCharCode(x);
    input.setAttribute('value',char);
});

＆＃13;

Answer 1

keypress导致这种情况发生。在角色最初添加到输入框后，它会触发。您可以使用e.preventDefault()

解决此问题

注意这会对光标产生奇怪的影响，因为它不再设置在当前字符之后，您只需将数据附加到输入框即可。光标将保持静止。

＆＃13;

const input= document.getElementById('click');
var char= '';
input.addEventListener('keypress',function(e){
    e.preventDefault();
    var x= e.which || e.keyCode;
    char += String.fromCharCode(x);
    input.setAttribute('value',char);
    
});

＆＃13;

<input type="text" name="" value="" id="click">

＆＃13;

或者更优选地，您可以使用新的input事件侦听器，它会立即在框输入上触发：

＆＃13;

const input= document.getElementById('click');
var char= '';
input.addEventListener('input',function(e){
    var x= e.which || e.keyCode;
    char += String.fromCharCode(x);
    input.setAttribute('value',char);
    
});

＆＃13;

<input type="text" name="" value="" id="click">

＆＃13;

处理按键事件

1 个答案: