当您使用IIFE按下Enter键时，我想显示文本
[英]I want to display the text when you hit enter using IIFE
问题描述
I have a text box that takes input and when i hit enter it stores the output and displays in an unordered list format. 
我有一个接受输入的文本框，当我按Enter键时，它存储输出并以无序列表格式显示。 The function without IIFE works when i use onclick event. 当我使用onclick事件时，没有IIFE的功能将起作用。 However, with IIFE its not functioning. 但是，对于IIFE，它无法正常工作。 Please help. 请帮忙。
<html>
<head>
<title>messagewithenter</title>
</head>
<body>
Message:
<input type="text" name="message" id="message">
<input type="submit" value="add" id="submitenter" style="display: none">
<ul id="list"></ul>
<script>
(function () {
var link = document.getElementById("submitenter");
link.addEventListener("click", function () {
document.onkeypress = enter;
function enter(e) {
if (e.which == 13 || e.keyCode == 13) {
addMessage();
}
}
});
function addMessage() {
var message = document.getElementById("message").value;
var output = "<li>" + message + "<li" + "<br>";
document.getElementById("list").innerHTML += output;
}
}());
</script>
</body>
</html>
2 个解决方案
解决方案1
0 2018-03-14 09:48:29
You were binding the event on click event of an invisible element, simply make it 您将一个隐形元素的click事件绑定到该事件上，只需使其
document.onkeypress = enter;
function enter(e) {
if (e.which == 13 || e.keyCode == 13) {
addMessage();
}
}
Demo 演示版
document.onkeypress = enter; function enter(e) { if (e.which == 13 || e.keyCode == 13) { addMessage(); } } function addMessage() { var message = document.getElementById("message").value; var output = "<li>" + message + "<li" + "<br>"; document.getElementById("list").innerHTML += output; }
Message: <input type="text" name="message" id="message"> <input type="submit" value="add" id="submitenter" style="display: none"> <ul id="list"></ul>
解决方案2
0 2018-03-14 09:57:30
link.addEventListener("click", function () {
document.onkeypress = enter;
...
This code is flawed because if it works, it would reset the document.onkeypress event handler every time you click in the input box. 该代码存在缺陷，因为如果它可以正常工作，则每次您在输入框中单击时，它将重置document.onkeypress事件处理程序。
It's also unnecessary, as you can set that onkeypress handler without needing the click event. 这也是不必要的，因为您可以设置onkeypress处理程序而不需要click事件。 The whole thing can be written like this: 整个事情可以这样写：
document.onkeypress = function(e) {
if (e.which == 13 || e.keyCode == 13) {
addMessage();
}
}
No need for the click handler at all. 完全不需要点击处理程序。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.