仿淘宝搜索框之---ie9以下版本placeholder效果

来源：互联网发布：win10引导 ubuntu 编辑：程序博客网时间：2024/06/06 20:04

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>仿淘宝搜索框</title><style>.search{width: 300px;height: 30px;margin: 100px auto;position: relative;}.search input {width: 200px;height: 25px;}.search label{font-size: 12px;color: #CCCCCC;position: absolute;top: 8px;left: 10px;cursor: text;}</style><script type="text/javascript">window.onload = function(){function $(id){return document.getElementById(id);}$('txt').focus();$('txt').oninput = $('txt').onpropertychange = function(){if(this.value == ""){$('message').style.display = 'block';} else {$('message').style.display = 'none';}}}</script></head><body><div class="search"><input type="text" id="txt" /><label for="txt" id="message">puma女鞋</label></div></body></html>

打开页面，搜索框中就可以看到灰色字体“puma女鞋”并自动获取光标。点击输入，灰色字消失。清空文本框的所有内容，灰色字自动恢复。

判断用户输入的事件有 oninput 和onpropertychange 。由于浏览器兼容的问题，他们出现的场合有所不同。正常浏览器支持oninput ，而 IE6、IE7、IE8 支持的 onpropertychange 。

阅读全文

0 0