您的位置：首页 > 其它

输入框--仿placeholder，oninput检测用户输入事件

2016-11-18 19:54 501 查看
user-select: none; /* 禁止选择网页内容 */

完美解决了 和input相配合的label能够选中 问题。

代码中注释部分也可以达到 此效果！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.search{
width: 300px;
height: 30px;
margin: 100px auto;
position: relative;
}
.search input{
width: 200px;
height: 20px;
outline-style: none;
text-indent: 10px;
}
.search label{
position: absolute;
top: 8px;
left:10px;
font-size: 12px;
color: #666;
cursor: text;
/* touch-action: none;  禁止触发默认的手势操作
-ms-touch-action: none;
pointer-events: none; css3属性，鼠标事件失效  */

-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
user-select: none;  /* 禁止选择网页内容 */
}
</style>
<script>
window.onload = function(){
function $(id){ return document.getElementById(id);}
//oninput 大部分浏览器支持  检测用户表单输入内容
//onpropertychange  ie678  检测用户表单输入内容
$('txt').oninput = $('txt').onpropertychange = function(){  //  用户输入触发
if($('txt').value == ""){
$('txtLabel').style.display = "block";
}else{
$('txtLabel').style.display = "none";
}
}
$('txt').onmouseover = function(){
this.select(); //选中所有文本
}
}
</script>
</head>
<body>
<div class="search">
<input type="text" id="txt">
<label for="txt" id="txtLabel">必败的品牌</label>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航