想问下,输入框末尾自动补充清空X的功能是怎么实现的

天降扫把星 2014-05-04 11:49:24
就是输入框输入数据之后,输入框的末尾自动呈现一个X,点击之后可以将输入框内容全部清空
...全文
175 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
Go 旅城通票 2014-05-05
  • 打赏
  • 举报
回复
css控制x显示位置
<style>
.input{position:relative;}
.input .x{display:none;text-decoration:none;position:absolute;left:190px;color:blue;font-weight:bold}
</style>
<div class="input"><a href="#" class="x" onclick="return clearInput(this)">x</a><input type="text" style="width:200px" onkeyup="xShow(this)" /></div>
<script type="text/javascript">
    function clearInput(a) {
        a.parentNode.getElementsByTagName('input')[0].value = '';
        a.style.display = 'none'; 
        return false;
    }
    function xShow(ipt) {
        ipt.parentNode.getElementsByTagName('a')[0].style.display = ipt.value == '' ? 'none' : 'block'
    }
</script>
Cocl 2014-05-04
  • 打赏
  • 举报
回复
那个x其实就是一张图片或者说是一个按钮,点击后输入框内容清空。 用keydown事件检测输入框是否为空,如果不为空则显示清空按钮,如果为空则隐藏

87,904

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧