Sometimes we want to hit the Enter key in the text box (input element) to submit the form (form), but sometimes we don't want this. For example, for search behavior, you want to directly press the Enter key after entering the keywords to submit the form immediately. For some complex forms, you may want to avoid accidentally pressing the Enter key to trigger the form submission before completing the form filling.
To control these behaviors, there is no need to resort to JS. The browser has already done this for us. Here are a few rules:
If there is a button with type="submit" in the form , the Enter key takes effect.
If there is only one input with type="text" in the form, regardless of the button type, the Enter key will take effect.
If the button is not input, but button, and no type is added, the default is type=button in IE and type=submit in FX.
Other form elements such as textarea and select are not affected, and the radio checkbox does not affect the triggering rules, but it will respond to the enter key under FX but not under IE.
The input of type="image" has the same effect as type="submit". I don’t know why such a type is designed. It is not recommended. It is more appropriate to use CSS to add a background image.
In actual application, it is easy to make the form respond to the Enter key. Just make sure there is a button with type="submit" in the form. And what should I do when there is only one text box and I don’t want to respond to the Enter key? My method is a bit awkward, which is to write another meaningless text box and hide it. According to rule 3, when we use buttons, try to explicitly declare the type to ensure consistent browser performance.
Made a DEMO listing some examples.
Run the code box
submit< ;/title><br></head><br><body><br><h1>This demo demonstrates whether pressing the enter key in the text box triggers form submission</h1><br>< h2>By default, a text box is submitted, regardless of whether the button type is submit or button</h2><br><form action="http://www.koubei.com"><br>< ;input type="text"><br><input type="button" value="Submit"><br></form><br><h2>How to do this with a text box To not submit, the method is to add a hidden text box</h2><br><form action="http://www.koubei.com"><br><input type="text" ><br><input type="text" style="display:none"><br><input type="button" value="Submit"><br></form><br><h2>As long as there is a button of type submit, whether one text box or multiple text boxes are submitted</h2><br><form action="http://www.koubei.com"> <br><input type="text"><br><input type="submit" value="submit"><br></form><br><h2>As long as the type is The submit button exists, whether one text box or multiple text boxes are submitted</h2><br><form action="http://www.koubei.com"><br><input type=" text"><br><input type="text"><br><input type="submit" value="Submit"><br></form><br><h2> When there are multiple text boxes, do not submit, just use a button of type button</h2><br><form action="http://www.koubei.com"><br><input type="text"><br><input type="text"><br><input type="button" value="Submit"><br></form><br>< ;h2>When using the button element, the performance is different under FX and IE</h2><br><form action="http://www.koubei.com"><br><input type= "text"><br><input type="text"><br><button>Submit</button><br></form><br><h2>radio and checkbox are in Form submission will also be triggered under FX, but not under IE</h2><br><form action="http://www.koubei.com"><br><input type="text" ><br><input type="radio" name="a"><br><input type="checkbox" name="b"><br><input type="checkbox" name ="c"><br><input type="button" value="Submit"><br></form><br><h2>A button of type image is equivalent to a button of type submit The effect</h2><br><form action="http://www.koubei.com"><br><input type="text"><br><input type=" text"><br><input type="image" src="http://k.kbcdn.com/images/common/logo_yahookoubei_s.gif"><br></form><br>< ;/body><br></html></p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p>
<p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> </div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Android zoom effect welcome page_html/css_WEB-ITnose" href="https://m.php.cn/faq/274258.html">Android zoom effect welcome page_html/css_WEB-ITnose</a></span><span>Next article：<a class="dBlack" title="Android zoom effect welcome page_html/css_WEB-ITnose" href="https://m.php.cn/faq/274260.html">Android zoom effect welcome page_html/css_WEB-ITnose</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script><!-- End Matomo Code --></html>
