<style type="text/css"> textarea{ width: 400px; height:400px; resize: none; } .limit{ width: 400px; text-align: right; } #d1{ margin: 100px; } input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:red; } input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color:red; } input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:red; } textarea::-webkit-input-placeholder{ color:red; } textarea::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:red; } textarea:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color:red; } textarea:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:red; } </style>
2、文本框字数限制
<div id = "d1"> <div> <input type="text" placeholder='的奇偶为不让你'/> <textarea placeholder='减肥的设计费我没如风达'/> </div> <div class="limit"> 最大可输入 <span>0</span>/20 </div> </div> <script type="text/javascript"> //先定义计算字符串字数 function getStrleng(str,max) { myLen = 0; i = 0; for (; (i < str.length) && (myLen <= max * 2); i++) { if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) //根据Unicode编码值判断是否汉字 myLen++; else myLen += 2; } return myLen; } //定义函数获得DOM元素 function Q(s){ return document.querySelector(s); } //定义函数显示写了几个字 function checkWord(c) { var maxstrlen = 20; var str = c.value; //对象的内容 myLen = getStrleng(str,maxstrlen); //计算str的字符个数 var wck = Q(".limit span"); console.log(wck) if(myLen > maxstrlen * 2){ c.value = str.substring(0, i - 1); }else{ wck.innerHTML = Math.floor(myLen / 2); } } Q('textarea').onkeyup =function(){ checkWord(this); } </script>