移动端H5将手机”回车键”改成”搜索”

移动端H5的流行其实也直接或间接的拉动了其他行业的增长,甚至是新行业的出现。比如咱们市场上近年热门的APP开发,说起APP开发对于普通百姓来说可能不是很懂,最多只是知道价格高低不一样,而对于行业内的人来说,价格因素直接导致了APP开发的两端:H5混合开发和原生开发。

因为我不是专业做前端的,所以关于前端的内容分享偏少一些。那么今天主要分享下H5混合开发时如何将手机输入法的回车键改成搜索键。

H5回车键改成搜索键

生活中除了脑残的设计外,基本上每一项设计都是有原因的,就拿改键盘名称来说主要就是为了解决移动端页面宽度受限的情况下,提示用户点击这个按键可以直接开始搜索。而不是像电脑端的页面那样可以专门设计一个“搜索”的按钮放在页面上,这样设计的另一个好处就是用户在输入关键词完毕之后不用关掉输入法去点击页面中的搜索,而可以直接通过点击键盘上的按钮进行搜索,使用起来也更加的方便。

HTML部分:

  1. <form action="#" onsubmit="return false;">
  2.             <input id="search_input" type="search"  autocomplete="off" value=""/>
  3. </form>

在上述代码部分一定要切记<input>外层的<form>标签是必须的,action可以提交表单,但是一般用ajax处理时都留空即可,onsubmit是阻止表单提交的事件。

JS部分:

  1. <script>
  2. $('#search_input').bind('keypress', function(event) {
  3.         if (event.keyCode == "13") {
  4.            var content = $(this).val();
  5.            //console.log(content);
  6.             if(content != ''){
  7.                 $.ajax({
  8.                     url:"{:url('Search/search')}",  //提交的URL
  9.                     data:{content:content}, //搜索关键词
  10.                     type:"Get",  //数据提交方式
  11.                     dataType:"html",  //数据返回方式
  12.                     success:function(data){
  13.                        //提交成功后执行
  14.                     },
  15.                     error:function(data){
  16.                        //提交错误时执行
  17.                     }
  18.                 })
  19.             }else{
  20.                 alert('关键词不能为空');
  21.             }
  22.         }
  23.     });
  24. </script>

上述方法经测试在IOS、和大多数安卓机上都是没有问题的,目前出现问题的机器主要集中在国产手机厂商自主集成的个别手机上,比如VIVO等。

 

你想把广告放到这里吗?

发表评论

您必须 登录 才能发表留言!