修改input和textarea的placeholder的颜色,限制文本框字数输入

<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>

 

posted @ 2019-01-23 11:38  abc1234_abc  阅读(4097)  评论(0编辑  收藏  举报