本文主要是介绍输入框--仿placeholder，oninput检测用户输入事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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> 这篇关于输入框--仿placeholder，oninput检测用户输入事件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
