校验输入框输入字符的数量

冷不防 2022-08-13 13:57 326阅读 0赞

![Center][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>校验输入框输入字符的数量</title>
    
    <style>
        /*reset*/
        * { margin: 0; padding: 0; color: #323232; }
        dl { font: normal 12px tahoma,arial,helvetica,sans-serif; width: 400px; height: 300px; margin: 20px auto; }
        /*hint*/
        .hint { background-color: #FFFAB1; border: dotted 1px #F7AB00; line-height: 24px; font-size: 14px; padding: 3px; }
        .hint p { float: right; }
        /*comment*/
        .commentBox { padding-top:6px; }
        #comment { width: 398px; height: 100px; font-size: 18px; font-family: tahoma,arial,helvetica;}
        /*button*/
        .buttonBox input { background: none; border: none 0; width: 48px; height: 24px; line-height: 24px; border: solid 1px #848484; background-color: #eeeeee; margin-right: 20px; margin-top: 12px; }
        .buttonBox p { float: right; }
        input.noMarginRight { margin-right: 0px; }
    
    </style>
    <script>
        var comment = null;
        var defaultValue = "无相关备注信息。"
        var maxSize = 100;
    
        window.onload = function() {
            init();
        }
    
        function $(id) {
            return document.getElementById(id);
        }
        
        function init() {
    
            comment = $("comment");
            comment.innerHTML = defaultValue;
            
            comment.onclick = function() {
                if (defaultValue != comment.innerHTML) {
                    return;
                };
                comment.innerHTML = "";
            }
            comment.onblur = function() {
                if (defaultValue == comment.innerHTML || "" != comment.innerHTML) {
                    return;
                };
                comment.innerHTML = defaultValue;
            }
            
            $("clear").onclick = function() {
                comment.innerHTML = "";
            }
            $("default").onclick = function() {
                comment.innerHTML = defaultValue;
            }
            $("cancel").onclick = function() {
                // do something
            }
            $("save").onclick = function() {
                // do something
            }
            
        }
        
        function onPropertyChanged(event) { // for IE8 and below
            if (event.propertyName.toLowerCase() == "value") {
                validateInput();
            }
        } 
        function onInputChanged(event) { // for IE9 and others
            validateInput();
        } 
        function validateInput() {
            var content = comment.value;
            if (content.length > maxSize) {
                comment.value = comment.value.substring(0, maxSize);
                return;
            }
            $("totalInputCharNumbers").innerHTML = content.length;
        }
        
    </script>
    </head>
    <body>
        
        <dl>
            <dt class="hint">备注信息最多支持录入100个汉字。<p><b id="totalInputCharNumbers">0</b>/100</p></dt>
            <dd class="commentBox">
                <textarea id="comment" 
                          οninput="onInputChanged(event)" 
                          onpropertychange="onPropertyChanged(event)"></textarea>
            </dd>
            <dd class="buttonBox">
                <input type="button" id="default" value="默认" /><input type="button" id="clear"   value="清空" />
                <p>
                    <input type="button" id="save"    value="确定" />
                    <input type="button" id="cancel"  value="取消"  class="noMarginRight"/>
                </p>
            </dd>
        </dl>
    
    </body>
    </html>

[Center]: /images/20220810/2bf7c4705d614cb78119198d4db1fe96.png