-
正如你所看到的，当页面打开时，搜索框可以看到女孩的灰色高跟鞋和闪烁的光标。当用户点击输入时，灰色单词就会消失。当用户清除文本框的所有内容时，灰色单词会自动恢复。
接下来，这个小案例将介绍如何实现这种效果，即用户输入事件。
确定用户输入事件的录入和onpropertychange。当然，你可以在浏览器的状况的差异，因为浏览器的兼容性。正常的浏览器支持的录入，而IE6，IE7和IE8的支持，onpropertychange。
为了节省时间，不再模仿淘宝的CSS样式。
代码和解析：
法官使用的录入和onpropertychange用户输入事件的二倍
{。搜索
宽度：300px；
身高：30px；
保证金：100px汽车；
职位：相对；
}
搜索{输入
宽度：200px；
身高：25px；
}
搜索{标签
字体大小：12px；
颜色：# CCC；
位置：绝对；
上图：8px；
左：10px；
光标：文本；
}
业务逻辑分析：
1。内容为空，搜索框中的默认光标和文字显示。自动对焦
2。/当输入时默认的字消失。使用输入事件
在window.onload =函数（）{
函数$（ID）{ return document.getelementbyid（ID）；}
$（）（焦点）；光标的自动获取方法
$（txt）。Oninput = $（txt）。Onpropertychange =函数（）{（）
/ /录入大多数浏览器支持用户输入内容的检测
/ / onpropertychange ie678检测用户输入内容的形式
如果（this.value = ={）
首先确定文本框的值是否为空。注意双标记！
$（信息）。style.display =块；
{人}
$（信息）。style.display =没有；
}
}
}
淘宝搜索框
<！注意，标签中属性值的值指向输入的id值，这意味着标签标签与输入表单相关联。
标签元素对用户不会产生任何特殊效果。当用户单击标签元素中的文本时，浏览器会自动将焦点转移到与标签相关联的表单控件上。>
uff1a效应
以上是JS仿淘宝搜索框Xiaobi介绍的用户输入事件的实现，我们希望能帮助你。如果你有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。