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

最新推荐文章于 2021-09-24 14:27:40 发布

forwardNow

最新推荐文章于 2021-09-24 14:27:40 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签：校验输入框输入字符数量的校验

本文链接：https://blog.csdn.net/wuqinfei_cs/article/details/40628669

版权

前端专栏收录该内容

268 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>校验输入框输入字符的数量</title>
<!--  
    参考: http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html
-->
<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>

forwardNow

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
校验输入框输入字符的数量

校验输入框输入字符的数量 /*reset*/ * { margin: 0; padding: 0; color: #323232; } dl
复制链接

扫一扫

专栏目录