主要利用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);

});*/

需要注意的是，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;

}

移动端input“输入框”常见问题及解决方法

转自 https://www.cnblogs.com/ljx20180807/p/9837748.html 1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在 ...

实现bootstrap布局的input输入框中的图标点击功能

使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标.如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的 ...

input弹出的手机键盘搜索事件

一.input的搜索框    在input标签里面把type设置为search就可以了.弹出的手机键盘回车键也会变成搜索或者是搜索的图标.

input required字段；django input输入框不填写会自动变红如何修改

前端页面中,input不输入任何内容时,点击submit时,未填写的input会标红框,有些人还会有"该字段必填的字样"!! 什么鬼,你妹的,js也见不到,css3动画也见不到,怎 ...

H5页面input输入框含有键盘自带的表情符时显示异常

在做一个关于新闻的评论功能的H5页面时,需求里面要求能够发送表情显示表情,如果使用自定义的表情库,则在评论也还要加载大量的表情符图片,极大的影响加载速度,消耗流量,去看了下别的新闻网页版的评论部分也没 ...

一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现

https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...

开发移动端web应用, 使用手机自带键盘的搜索按钮

很多时候在移动端的web页面中, 需要使用搜索功能, 然而页面中并没有太多的空间来放置一个像pc端上那样的搜索按钮, 这时候就需要借用手机输入法自带的搜索按钮来实现点击搜索 虽然不是什么大的功能, 但 ...

随机推荐

Put-Me-Down项目Postmortem2

一.设想和目标 二.计划 三.资源 四.变更管理 五.设计/实现 六.测试/发布 总结 一.设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的 ...

R语言实战(一)介绍、数据集与图形初阶

本文对应前3章,因为里面大部分内容已经比较熟悉,所以在这里只是起一个索引的作用. 第1章       R语言介绍 获取帮助函数 help(), ? 查看函数帮助 exampl ...

PCA降维

http://blog.csdn.net/a784763307/article/details/17289317 这篇比较棒 openCV版 void PrintMatrix(CvMat *Matri ...

php基础语法-函数等

php是弱类型语言, 但并不是 无类型 语言! 同样有变量类型, ====================================================== 形容词(短语)修饰名词的 ...

List Copy

//要复制的实例必须可序列化,包括实例引用的其它实例都必须在类定义时加[Serializable]特性. public static T Copy(T RealObject) { u ...

Android调用相机并将照片存储到sd卡上

Android中实现拍照有两种方法,一种是调用系统自带的相机,然后使用其返回的照片数据. 还有一种是自己用Camera类和其他相关类实现相机功能,这种方法定制度比较高,洗染也比较复杂,一般平常的应用只 ...

javasciprt性能优化

本文主要是在我读之后,想要记录下一些有用的优化方案,并且就我本身的一些经验,来大家一起分享下, Javascript的加载与执行 大家都知道,浏览器在解析DO ...

java 线程(七)等待与唤醒

package cn.sasa.demo5; public class Resources { private String name; private boolean gender; //标记 pu ...

反射中setAccessible()方法

调用私有变量域的时候要用setAccessible https://blog.csdn.net/kjfcpua/article/details/8496911