如何检测“shift+enter”并在文本区域中生成新行
文本区域标签定义了一个多行文本输入控件。文本区域的大小可以通过cols和rows属性来指定。默认情况下,无论是按下“enter”还是“shift+enter”,它都会在文本区域中创建一行新文本。因此,为了只检测“shift+enter”并从中生成新行,我们需要阻止“enter”生成新行,并将其重定向到执行其他操作,例如提交表单。
示例1: 请查看以下有关“enter”和“shift+enter”机制的示例。所以,在下面的代码中,“enter”和“shift+enter”两者都可以做同样的事情。所以,只需要阻止“enter”机制或将其重定向到执行其他操作即可。
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<script>
function geeks(event) {
// 13 is the keycode for "enter"
if (event.keyCode == 13 && event.shiftKey) {
document.getElementById("d").innerHTML = "Triggered enter+shift";
}
if (event.keyCode == 13 && !event.shiftKey) {
document.getElementById("d").innerHTML = "Triggered enter";
}
}
</script>
<h4>Press "enter" or "shift+enter" in the textarea, both does the same.</h4>
<textarea rows="8" cols="50" onkeypress="geeks(event)">
GeeksforGeeks A Computer science portal for geeks.
</textarea>
<p id="d" style="color:red"></p>
</center>
</body>
</html>
输出:
示例2: 在下面的代码中,我们创建了一个名为submitForm()的函数来提交表单,该表单仅包含一行,因为将这个document.geek.submit()放置在event.preventDefault()下面,document.geek.submit()将覆盖event.preventDefault()并且不会阻止”enter”键创建一行。
<!DOCTYPE html>
<html>
<head>
<script>
function press(event) {
if (event.keyCode == 13 && !event.shiftKey) {
//Stops enter from creating a new line
event.preventDefault();
submitForm();
return true;
}
function submitForm() {
document.geek.submit(); //submits the form.
}
}
</script>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h4>
Press "enter" to submit and "shift+enter" to generate a new line.
</h4>
<form action="submit.html" name="geek">
<textarea rows="7" cols="30" onkeypress="press(event)"></textarea>
</form>
</center>
</body>
</html>
submit.html中的HTML:
<!DOCTYPE html>
<html>
<body>
<h2 style="color:red">List Submitted.</h2>
</body>
</html>
输出: