如何检测“shift+enter”并在文本区域中生成新行

如何检测“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> 

输出:

如何检测“shift+enter”并在文本区域中生成新行

示例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>   

输出:

如何检测“shift+enter”并在文本区域中生成新行

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程