JavaScript实现输入框与清空按钮联动效果


Posted in Javascript onSeptember 09, 2016

废话不多说了,直接给大家贴关键代码了,具体代码如下所示:

<!DOCTYPE html><html><head><metacharset="UTF-8"><title>输入框清空按钮</title><scriptsrc="js/jquery1.8.3.min.js"></script><script>/**
* 校验当前输入框的值,如果不为空显示清空按钮
* @param element
*/functioncheckInput(element){var value = $(element).val();
if(value!=null&&''!=value)
$(element).parent().parent().children().children('.button').removeClass('none');
else
$(element).parent().parent().children().children('.button').addClass('none');
}
/**
* 清空输入框内容
* @param element
*/functionclearInput(element){
$(element).parent().parent().children().children('input').val('');
$(element).addClass('none');
}
</script><style>.none{
display: none;
}.height-20{
height:20px;;}.button{
color: red;
font-size:18px;
width:100px;
height:18px;;border:1px solid red;
border-radius:5px;
}</style></head><body><div><div><inputtype="text"placeholder="输入试试看"onkeyup="checkInput(this);" >
</div><divclass="height-20" ></div><div>
<aclass="none button"onclick="clearInput(this);" >clear input</a></div></div></body>
</html>
').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++)
{ $numbering.append($('
').text(i)); }; $numbering.fadeIn(1700); }); });

以上所述是小编给大家介绍的JavaScript实现输入框与清空按钮联动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
JavaScript实现点击图片换背景
Nov 20 Javascript
Three.js快速入门教程
Sep 09 #Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 #Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 #Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 #Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 #Javascript
全面解析Bootstrap表单样式的使用
Sep 09 #Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 #Javascript
You might like
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
购买一个高级域名:BuyDomains
2018/03/11 全球购物
经济国贸专业求职信
2014/06/18 职场文书
品牌转让协议书
2014/08/20 职场文书
后勤个人工作总结
2015/02/28 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
上班旷工检讨书
2015/08/15 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL