JavaScript实现输入框与清空按钮联动效果
更新时间：2016年09月09日 15:50:29 投稿：mrr
本文给大家分享基于js实现输入框与清空框按钮联动效果，非常实用，代码简单易懂，感兴趣的朋友一起看看吧
废话不多说了，直接给大家贴关键代码了，具体代码如下所示：
<!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实现输入框与清空按钮联动效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本文主要给大家简单介绍了是什么是DOM、动态操作DOM元素的方法、使用jsjs操作样式以及Form对象的简介，是个人对于javascript中的DOM的理解的总结，推荐给小伙伴们。2015-03-03
javascript将json格式数组下载为excel表格的方法
下面小编就为大家分享一篇javascript将json格式数组下载为excel表格的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了JS+CSS实现经典的左侧竖向滑动菜单效果,涉及JavaScript响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
Javascript中的this,bind和that使用实例
这篇文章主要介绍了Javascript中的this,bind和that使用实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
下面小编就为大家带来一篇js原生日历的实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
JavaScript是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。2015-08-08
本文主要介绍了JavaScript中闭包的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要介绍了JS/CSS实现字符串单词首字母大写功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了JS数据类型STRING使用实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
小程序登录是现在小程序里面很普遍的一个功能,因为官方提供的方法,可以一键获取到用户信息,一键拿到手机号,这篇文章主要给大家介绍了关于微信小程序如何同时获取用户信息和用户手机号的相关资料,需要的朋友可以参考下2021-08-08
最新评论