【问题标题】:How to set focus and set the text in input text using createEvent and dispatchEvent? [closed]如何使用 createEvent 和 dispatchEvent 设置焦点并设置输入文本中的文本? [关闭]
【发布时间】:2016-05-30 05:01:13
【问题描述】:

我正在尝试用 Javascript 编写代码,该代码应将光标焦点设置在输入文本框上,并应触发“按键”事件,该事件应设置键,例如文本框中的字母“A”。

怎么做?我读到我们可以使用createEventdispatchEvent 来实现。有什么建议吗?

【问题讨论】:

  • 你想要什么?您是否尝试将按键事件机会焦点输入控件
  • 请清楚你想要什么!
  • 我需要触发一个“keypress”事件,该事件应该在文本框中设置一个字符键。

标签: javascript html dom-events keyboard-events html.textboxfor


【解决方案1】:

试试这个

<input type="text" id="input-field" />

<script>

var addData = function(data){
var field = document.getElementById("input-field")
field.value = document.getElementById("input-field").value+data;

var keyboardEvent = document.createEvent("KeyboardEvent");
var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ?   "initKeyboardEvent" : "initKeyEvent";


keyboardEvent[initMethod](
               "keypress", // event type : keydown, keyup, keypress
                true, // bubbles
                true, // cancelable
                window, // viewArg: should be window
                false, // ctrlKeyArg
                false, // altKeyArg
                false, // shiftKeyArg
                false, // metaKeyArg
                40, // keyCodeArg : unsigned long the virtual key code, else 0
                0 // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0
);
field.dispatchEvent(keyboardEvent);

}

 var registerEvents = function(){
 document.getElementById("input-field").addEventListener("keypress",function(event){
    alert("Key Pressed : "+ event.target.value)
 });
}();
addData("a");
addData("b");

</script>

Anyways Entered 键将在文本字段中可用,无需显式设置。

【讨论】:

  • 不会在文本框中手动输入任何内容。我们需要使用 javascript 设置文本。怎么办?
  • 现在检查,我已经进行了编辑
  • 感谢@Sabith 的回答。我需要在上面的代码中澄清一件事。你已经使用 field.value = document.getElementById("input-field").value+data;它使用传递的数据显式设置文本框值。当我们触发“keypress”事件时,文本框是否无法更新文本本身?
  • 这里我们只模拟键盘事件。如果我们在输入字段中输入内容,输入字段将填充该值,然后触发事件。那是默认行为。相反,我们只是简单地触发没有价值的事件。所以它不会自己填充,我们必须自己添加。
  • 非常感谢您的宝贵建议!!!感谢您的回答!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-11-01
  • 2011-10-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多