先说一句,项目有需求,用H5来开发手机app,我第一次较系统的接触H5的知识,略有心得,记录下来.
主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别;
html代码入下:
但要实现点击键盘右下角搜索,来发送请求,js代码如下(以下代码段记得引入jquery)://方法一
$("#myform").on('keypress', function(e) {
var keycode = e.keyCode;
var searchName = $(this).val();
//keycode是键码,13也是电脑物理键盘的 enter
if(keycode == '13') {
alert(2)
e.preventDefault();
//请求搜索接口
}
});
//方法二
以下是原文引述:
//这两种都能用, 一个是在form上加id 一个是在input元素加id
//对于苹果手机添加一个form元素是必要的,否则只能实现功能但是键盘的文字不能变成搜索字样
$('#myform').bind('search', function () {
//coding
alert(1);
});
/*$('#input').bind('search', function () {
alert(1);
});*/
对上述2种监测用户点击"搜索"按键的方法,我曾进行了实际的测试.结果是:
1.苹果手机上,input外面必须要套一个form标签,否则最终可以实现搜索的功能,但是输入法里显示仍是"完成"按键,而不是"搜索"字样;
2.第一种办法,对form监测keypress事件,可行,能取到用户每次在屏幕上点击的按键值;
但是第二种方法,不管是对form绑定search还是对input绑定search事件,不管是在手机chrome,还是在手机Firefox上,取到的按键值始终是undefined,也就是说不能取到键值.
此种办法,我暂时存疑.~
需要注意的是,input[type=search],在用户输入时,默认情况下会自动在输入框最右侧出现一个 ‘X’,是为了方便用户点击清除所输入的内容,但是这个 X 的默认样式却可能机型不一样而不同,有的是默认一个蓝色的X,很不美观,
我们往往需要修改这个X或者直接去掉它,应该怎么实现呢?答案很简单,只要一个CSS属性即可,代码如下:
input[type=search]::-webkit-search-cancel-button{
-webkit-appearance: none;/*此处只是去掉默认的小×*/
}
只要通过 -webkit-search-cancel-button这个属性即可实现去除,去除后我们可以自定义样式;
input[type=search]::-webkit-search-cancel-button{
-webkit-appearance: none;
position: relative;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #EBEBEB;
}
input[type=search]::-webkit-search-cancel-button:after{
position: absolute;
content: 'x';
left: 25%;
top: -12%;
font-size: 20px;
color: #fff;
}
更正: 经过实地测试,第二种方法可行.
//第二种方式:
$('#keyForm').bind('search', function (event) {
//请求搜索接口
event.preventDefault();
$('#txt_key').blur();
btn_search_click();
});
发现bind search事件时,不需要再监测keyCode值,点击"搜索"按钮就会自动触发search事件!
但是,有1点注意:
1.查资料后,发现search并没有event这个参数.所以不能阻止form的默认提交行为. 会造成,第一次搜索时,页面整体的刷新,转圈圈. 效果非常不好~~
怎么办呢?
要么换用第1种方法,要么如下:
给form加一个οnsubmit="return false;"即可阻止默认的提交行为了,也就达到阻止刷新页面的目的啦!
参考:https://www.cnblogs.com/lst619247/p/9292947.html
踩在大神的肩膀上,还是要感谢前人的分享!