点击input输入框弹出来的软键盘有搜索按钮

原创 燃烧的陈林林 随笔 移动端 459阅读 2017-05-17 12:42:57 举报

input元素中的type属性规定input元素的类型。HTML5中新增了许多属性。要让手机弹出的软键盘里面有搜索按钮就需要用到其中一种类型。type="search" ,定义用于搜索的文本字段。

单单用input且里面type="search"还不够,这时候input还需要被form标签包裹着。

如图所示:

input输入的时候右边出现小叉叉--燃烧的陈林林

当我们输入“燃烧的陈林林”的时候,突然发现右边有个小叉叉,在不同的安卓手机里面有不一样的展现形式,很影响美观。对于有追求的前端工程师是不会让影响美观的事情发生的。问题来了,怎么办?还能怎么办?去掉呗。

去掉默认小叉叉的代码如下:
css 代码

这小叉叉是它的默认样式,点击小叉叉可以清除输入的内容。

燃烧的陈林林,提醒:这个功能跟我们右边的取消按钮一样。然后我们能不能重写小叉叉的样式覆盖在取消按钮的上面呢?这样我们就不需要用JS控制点击“取消”按钮的时候去掉输入的值,一举两得。

为了让读者测试,最后附上完整代码:
html 代码

html 代码

改写小叉叉覆盖在取消按钮上面

欢迎学习交流——燃烧的陈林林

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复