仿淘宝搜索框之---ie9以下版本placeholder效果
2017-11-07 11:56
686 查看
<!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 。
<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 。
相关文章推荐
- jquery 解决ie9及以下版本不支持placeholder属性
- placeholder 兼容IE9以下版本 包含pasword
- 在ie9以下的版本placeholder显示
- jQuery 两种方法实现IE10以下浏览器的placeholder效果
- background兼容IE9以下版本
- 对于IE 10 以下版本placeholder的兼容性解决方案
- 用JS判断浏览器是否是IE9以下,处理可能遇到的兼容性问题,或者给出浏览器版本过低的升级提醒。
- JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
- 简单实现IE9及以下对placeholder的兼容性
- JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
- 兼容ie10以下版本的placeholder属性
- Android2.0版本以下Activity切换动画效果
- ie8及其以下版本兼容性问题之placeholder实现
- 让IE9以下版本的浏览支持html5,CSS3的插件
- Android2.0版本以下Activity切换动画效果
- tcpcopy分布式压力测试,效果堪比真实压力,远胜ab(注意采用的工具是tcpcopy 0.5以下的版本)
- IE9及以下的版本的String的trim方法
- IE9 以下版本浏览器兼容HTML5的方法,使用百度静态资源的html5shiv包
- HTML:IE9及9以下浏览器兼容placeholder(包含密码输入框)
- 判断浏览器版本是否是ie9以下浏览器,提示升级