简体   繁体   English

在文本区域上按Enter键时如何提交表单?

[英]How to submit a form when the Enter Key on a textarea?

I want to submit the content in the textarea as shown below by just hitting the Enter key on any keyboard on planet earth. 我想通过单击地球上任何键盘上的Enter键,在文本区域中提交内容,如下所示。 When the user hits the Shift+Enter key, the caret has to go to a new line and on hitting Enter the submitted textarea content should have the new lines created when the Shift+Enter was pressed. 当用户按下Shift+Enter键时,插入符号必须转到新行,并且在Enter ,提交的文本区域内容应具有按下Shift+Enter时创建的新行。 The content of the textarea should be inserted after the the div with class commentWrap but the last submitted comment should apear last and vice verser. textarea的内容应在div之后插入带有commentWrap类的commentWrap但最后提交的注释应出现在最后,反之亦然。

I want this solution to work in all browsers. 我希望该解决方案能在所有浏览器中使用。

<div class="commentWrap"></div>

<textarea id="test"></textarea>

<script type="text/javascript">
    $(document).ready(function() {
        $("#test").keypress(function(e) {
            var textVal = $(this).val();
            if(e.which == 13 && e.shiftKey) {
                //What should I really do here
            }
            else if (e.which == 13 && ! e.shiftKey) {
                e.preventDefault(); //Stops enter from creating a new line
                //this.form.submit(); //or ajax submit
                if (this.value ==="") {
                    alert("Hey punk! Put some text before you hit enter.");
                }else {
                    alert(textVal);
                    $("<div class='comment'>"+ textVal +"</div>").insertAfter('.commentWrap');
                }
            }
        });
    });
</script>

//What should I really do here //我应该在这里真正做什么

Nothing I think, all browsers will insert a new line if shift + enter was pressed so you can just return true; 我认为,如果按下shift + enter,所有浏览器都不会插入新行,因此您可以返回true;

如果您已经具有用于提交表单的提交按钮,则只需触发点击处理程序即可。

    $("#submitButton").click();

React:如何提交表单<textarea>&lt;i&gt;with enter key and without a submit button with React Hooks?&lt;/div&gt;&lt;/i&gt;&lt;b&gt;带有回车键且没有带有 React Hooks 的提交按钮?&lt;/div&gt;&lt;/b&gt;</textarea><div id="text_translate"><p> Halo 伙计们,我对反应很陌生,我想提交一个只有文本区域的表单,并按下enter键。 我遵循了一些 SO 问题,但仍然没有运气,因为它没有被提交。 我还想在提交后清除文本区域。 我怎样才能用下面的代码做到这一点?</p><p> 这是我目前拥有的代码。</p><pre> const { register, handleSubmit, control, errors } = useForm(); const CommentOnSubmit = (data) =&gt; { let formData = new FormData(); formData.append('content', data.content); formData.append('user', user?.id); axiosInstance.post(`api/blogs/` + slug + `/comment/`, formData); }; // const commentEnterSubmit = (e) =&gt; { // if(e.key === 'Enter' &amp;&amp; e.shiftKey == false) { // return( // e.preventDefault(), // CommentOnSubmit() // ) // } // } &lt;form noValidate onSubmit={handleSubmit(CommentOnSubmit)}&gt; &lt;div className="post_comment_input"&gt; &lt;textarea type="text" placeholder="Write a comment..." name="content" ref={register({required: true, maxLength: 1000})} /&gt; &lt;/div&gt; &lt;div className="comment_post_button"&gt; &lt;Button type="submit" variant="contained" color="primary"&gt;comment&lt;/Button&gt; &lt;/div&gt; &lt;/form&gt;</pre><p> 请帮忙。</p><p> 非常感谢。</p></div> - React: How to submit a form with <textarea> with enter key and without a submit button with React Hooks?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在文本区域中按 Enter 时提交表单 - How to submit a form when pressing Enter in a textarea 通过Enter键提交表单,但javascript中的textarea除外? - Form submit by enter key except in textarea in javascript? 提交textarea表单,而没有带有Enter键的提交按钮 - Submit textarea form without a submit button with Enter key press 当我有按钮而不是提交时如何使用回车键提交表单 - How to submit form with enter key when I have a button, not a submit React:如何提交表单<textarea>&lt;i&gt;with enter key and without a submit button with React Hooks?&lt;/div&gt;&lt;/i&gt;&lt;b&gt;带有回车键且没有带有 React Hooks 的提交按钮?&lt;/div&gt;&lt;/b&gt;</textarea><div id="text_translate"><p> Halo 伙计们,我对反应很陌生,我想提交一个只有文本区域的表单,并按下enter键。 我遵循了一些 SO 问题,但仍然没有运气,因为它没有被提交。 我还想在提交后清除文本区域。 我怎样才能用下面的代码做到这一点?</p><p> 这是我目前拥有的代码。</p><pre> const { register, handleSubmit, control, errors } = useForm(); const CommentOnSubmit = (data) =&gt; { let formData = new FormData(); formData.append('content', data.content); formData.append('user', user?.id); axiosInstance.post(`api/blogs/` + slug + `/comment/`, formData); }; // const commentEnterSubmit = (e) =&gt; { // if(e.key === 'Enter' &amp;&amp; e.shiftKey == false) { // return( // e.preventDefault(), // CommentOnSubmit() // ) // } // } &lt;form noValidate onSubmit={handleSubmit(CommentOnSubmit)}&gt; &lt;div className="post_comment_input"&gt; &lt;textarea type="text" placeholder="Write a comment..." name="content" ref={register({required: true, maxLength: 1000})} /&gt; &lt;/div&gt; &lt;div className="comment_post_button"&gt; &lt;Button type="submit" variant="contained" color="primary"&gt;comment&lt;/Button&gt; &lt;/div&gt; &lt;/form&gt;</pre><p> 请帮忙。</p><p> 非常感谢。</p></div> - React: How to submit a form with <textarea> with enter key and without a submit button with React Hooks? 如何在 html textarea 中使用 enter press 提交表单 - How to submit form with enter press in html textarea 当表单提交被禁用时,如何在文本区域上按Enter下行 - How can I press enter go down line on textarea when form submit is disable keypress enter JSF:如何在按下回车键时提交表单? - JSF: How to submit the form when the enter key is pressed? 仅在按下“输入”键时提交表单 - Submit a form only when 'enter' key is pressed 如何使用ENTER键提交表单 - how to submit the form using ENTER key
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM