JS仿淘宝搜索框中用户输入事件的实现

淘宝是我们经常使用的网购平台。打开淘宝首页，在淘宝首页找到搜索框，如下图：

可以看到，当页面打开后，可以看到灰色字体“女生高跟鞋”，搜索框中闪烁的光标。当用户单击输入时，灰色单词消失。当用户清空文本框的所有内容时，灰色单词会自动恢复。

接下来这个小案例就是介绍如何达到这个效果，即用户输入事件。

用户输入的事件被判断为oninput和onpropertychange。当然，可以想象，由于浏览器的兼容性，它们出现在不同的场合。普通浏览器支持oninput，而IE6、IE7、IE8支持onpropertychange。

为了节省时间，不要模仿淘宝CSS风格。

代码和分析：

！doctype html lang=' en ' head meta charset=' utf-8 ' title判断第二次用户输入事件/title/head style . search { width :300 px；height: 30pxmargin: 100px自动；相对位置：} .搜索输入{ width:200pxheight:25px} .搜索标签{ font-size : 12px；color: # ccc绝对位置：top:8pxleft:10pxcursor:文本；}/style script type=' text/JavaScript '业务逻辑分析：//1。当内容为空时，光标和默认单词显示在搜索框中。自动获得焦点。//2.当您输入内容时，默认单词会消失。使用oninput事件窗口. on load=function(){ function $(id){ return document . getelementbyid(id)；} $('txt ')。焦点()；//自动获取光标$ ('txt ')。oninput=$ ('txt ')。onpropertytchange=function(){//on input大多数浏览器都支持检测用户表单输入//onpropertytchange ie 678检测用户表单输入if (this.value==''){ //首先判断文本框中的值是否为空。注意双等号！$(“message”). style . display=“block”；} else { $(“message”). style . display=“none”；} } }/脚本正文div class=' search '输入类型=' text' id=' txt '标签为=' txt' id=' message '模仿淘宝搜索框/标签！-注意标签中的for属性值指向输入的id值，这意味着将标签与输入表单相关联。标签元素不会向用户呈现任何特殊效果。当用户单击标签元素中的文本时，浏览器将自动将焦点转向与标签关联的表单控件。-/div/body/html效果：

以上是边肖介绍的JS仿淘宝搜索框中用户输入事件的实现，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！