首页 > 互联资讯 > 技术交流  > 

JavaScript实现form提交,回车提交URL地址伪静态 <font color=red>原创</font>

文本框(input element)里输入内容后,直接Enter回车键提交表单(form),是很方便的,也很人性化,便于用户使用。比如一个搜索框,希望输入完关键词之后直接按回车键立即提交表单,但如果不使用form提交,用JavaScript来实现提交动作,而且提交URL地址伪静态化,不想带问号和搜索关键词,搜索框内enter回车键自动提交,那么应该如何实现呢。笔者下面将用实际代码来展示。

下面是html中的简单form表单:

1、一个id是keywords的搜索框;
2、placeholder是文本框默认提示文字;
3、onkeydown是在该文本框中按下动作时触发事件,event.keyCode==13表示按下的是"ENTER"回车键,触发JavaScript的formsubmit函数。注意这里有return。
4、点击"搜索"按钮会触发formsubmit函数
备注:点击"搜索"按钮和搜索框内enter回车键触发的时同一个函数

下面是JavaScript的formsubmit函数:

1、获取文本框keywords的输入值,如果为空提示"请输入查询关键词!";如果存在keywords进行下一步
2、用keywords取得的,伪造URL伪静态链接(后端程序设计好)
3、window.location.href跳转到url页面
4、注意这里的return false,可以使得上面的form不主动提交


如果不需要提交URL伪静态,可以直接在form中action里写入url,也可以在JavaScript中改变form中action的值,进行form提交。keywords就会变成参数加到跳转链接里。


总结:上面的例子介绍了form使用javascript提交时,点击"搜索"按钮能提交,搜索框内也能使用enter回车键提交的方法和代码。详细解释了原理和各个代码的含义,简单易懂,便于学习。

到此这篇关于JavaScript实现form提交,回车提交URL地址伪静态的文章就介绍到这了,更多相关js实现form提交URL地址伪静态内容请搜索讯客以前的文章或继续浏览下面的相关文章希望大家以后多多支持讯客!

JavaScript实现form提交,回车提交URL地址伪静态 <font color=red>原创</font>由讯客互联技术交流栏目发布,感谢您对讯客互联的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人网站或者朋友圈,但转载请说明文章出处“JavaScript实现form提交,回车提交URL地址伪静态 <font color=red>原创</font>