H5 input type=search 搜索按钮的设置
来源:互联网 发布:手机2g和3g网络切换 编辑:程序博客网 时间:2024/05/16 15:19
转至元数据结
转至元数据起始
一、问题
设计搜索框时如果,单单使用input type=search 会导致一些手机的输入法不显示搜索按钮只显示换行如:
二、解决办法
解决这个问题可以在input标签外嵌套form标签
<form action="#">
<input type="search" />
</form>
问题解决了:
三、注意事项
如果<form></form>表单中只有一个<input type="text"/>,则使文本框获取焦点,并单击回车,form会自动提交。
提交路径为action属性拼接到当前路径(action属性默认为空字符串,如果form没有action属性,则提交路径与当前路径相同)。
浏览器表现:Chrome(桌布版、移动版)会出现此问题,Android手机会出现。Safari(桌面版、移动版)不会出现。
解决方法:禁止表单提交。
1 设置成<form onsubmit="return false;">
2 增加一个无name属性的隐藏文本框 <input type="text" style="display:none;/>
3 监听input的keydown事件。
input.addEventListener('keydown', function(e){
var keywd = e.target.value;
if(event.keyCode == 13 && keywd) {
e.preventDefault();
}
});
阅读全文
0 0
- H5 input type=search 搜索按钮的设置
- HTML5 搜索框input [type=search]
- <input type="file">中怎设置按钮的样式
- input[type=search]
- HTML5去除input [type=search] 的默认边框和删除按钮
- HTML5去除input [type=search] 的默认边框和删除按钮
- input [type=search] 搜索框去掉默认边框和旁边的小图标
- 设置<input type="text">的默认值
- input type=number的 小数设置
- 你不知道的input[type=search]
- 解决 iphone 下面 input type="search" 弹出虚拟键盘 不能显示 搜索 问题
- input type=file后面浏览按钮的样式控制
- 上传按钮<input type='file'/>的样式美化
- input[type=search]去掉小叉叉
- CSS3 去除苹果浏览器按钮input[type="submit"]和input[type="reset"]的默认样式
- input[type=file] 样式美化,input上传按钮美化
- Android WebView 不支持 H5 input type="file" 解决方法
- Android WebView 支持H5图片上传<input type="file">
- Spring Boot druid监控页添加登录访问权限(用户名+密码)
- ASP.NET Core部署在IIS上
- RAP数据集整理
- 前端-JS和CSS的引入/写入位置应该放在哪里?
- 开源中国颁发证书:GVP-码云最有价值开源项目(roncoo-pay)
- H5 input type=search 搜索按钮的设置
- newInstance() 和 new 有什么区别
- Ubuntu16.04安装Matlab2015b步骤
- 汉字处理的工具
- 新人学习日志
- java 批量更改CSV文件内容中指定位置的字符
- js实现图片点击时放大,再点击恢复
- 迭代解包(元组解包、元组拆包)Iterable Unpacking
- java提高篇-----HashTable