html点击文本框唤醒手机键盘,html移动应用 input 标签清除按钮功能如何实现（不触发键盘）...

有个需求是：输入框有文本的时候就显示清除按钮，没有文本则隐藏清除按钮，点击清除按钮不能影响键盘弹出的状态。

网上有css实现自动显示和隐藏清除按钮的方案，但是考虑到兼容性，我们还是使用js来实现。

css

body{

background: #eee;

}

form{

margin: 30px 0;

position: relative;

}

#keyword{

height: 90px;

font-size: 60px;

line-height: 90px;

width: 300px;

}

#clear{

color: red;

width: 90px;

height: 90px;

line-height: 90px;

text-align: center;

position: absolute;

top: 0;

left: 210px;

visibility:hidden;

}

html

var keyword = document.getElementById('keyword'),

clear=document.getElementById('clear'),

autoShow=function () {

clear.style.display=keyword.value.length>0?'block':'none';

clear.style.visibility=keyword.value.length>0?'visible':'hidden';

};

keyword.οninput=autoShow;

clear.οnmοusedοwn=function (e) {

keyword.value = '';

autoShow();

keyword.focus();

e.preventDefault();

e.stopPropagation();

return false;

};

html点击文本框唤醒手机键盘,html移动应用 input 标签清除按钮功能如何实现（不触发键盘）...相关推荐

php 点击文本框弹出时间,点击Input框弹出日期选项
点击text文本框弹出日期选择器 body{margin:0;padding:0;font:14px Verdana, Arial, sans-serif;line-height:200%;} #co ...
点击输入框弹出文字html,jQuery实现点击文本框弹出热门标签的提示效果
jQuery实现点击文本框弹出热门标签的提示示例_网页代码站 body { font-size:12px;font-family:Arial; } #m_tagsItem { background:# ...
点击文本框后页面变大
原因:HTML中默认是认为16px的字体,人才能看清楚,所以,当点击文本框的时候,当前文本框会以字体16px的大小显示(即字体小于16px页面会变大). 解决原理:设置文本框的的字体为16px: 解决 ...
html 弹出复选框,js点击文本框弹出可选择的checkbox复选框
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解 ...
jQuery实现点击文本框弹出热门标签的提示示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
点击文本框弹出热门标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
点击编辑框全选内容java,js实现鼠标点击文本框自动选中内容的方法
本文实例讲述了js实现鼠标点击文本框自动选中内容的方法.分享给大家供大家参考.具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候, ...
HTML、css——设置文本框中的默认字体颜色和点击输入的文本字体颜色不一致；并且点击文本框，文本框边框消失；输入内容时，默认字体消失。
html代码: 功能:点击输入的文本字体颜色的设置,并且输入内容时,文本框里的默认字消失. <input type="text" placeholder="手机号. ...
android手机上传不了图片,【报Bug】nvue页面使用web-view组件，安卓手机无法调用页面的input标签上传图片...
详细问题描述 nvue页面,使用web-view原生组件,导致web-view加载的网页页面不能触发input标签进行图片上传,导致这样的原因大致百度了一下是因为安卓5.0及以上使用input typ ...
IE 无法点击文本框或输入文字
问题描述: 使用IE浏览器上网时,点击网页中的表单或者文本框后无光标闪烁,因此无法输入任何内容解决方案: 此问题是由于系统中缺少mshtmled.dll文件或者该文件被修改所致,该文件位于c:\\w ...

html点击文本框唤醒手机键盘,html移动应用 input 标签清除按钮功能如何实现（不触发键盘）...

html点击文本框唤醒手机键盘,html移动应用 input 标签清除按钮功能如何实现（不触发键盘）...相关推荐

最新文章

热门文章

html点击文本框唤醒手机键盘,html移动应用 input 标签 清除按钮功能如何实现（不触发键盘）...

html点击文本框唤醒手机键盘,html移动应用 input 标签 清除按钮功能如何实现（不触发键盘）...相关推荐

最新文章

热门文章

html点击文本框唤醒手机键盘,html移动应用 input 标签清除按钮功能如何实现（不触发键盘）...

html点击文本框唤醒手机键盘,html移动应用 input 标签清除按钮功能如何实现（不触发键盘）...相关推荐