zoukankan      html  css  js  c++  java
  • 【表单】文本域字符数判断

    文本域字符数判断 by 渔人码头
    http://www.css88.com/archives/2027

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body>
    <div id="tip" style="color:#588905;">你还能输入<em>140</em>个字!</div>
    <form action="" method="post">
        <textarea id="textArea" name="textArea" cols="50" rows="10"></textarea><br />
        <input id="button" name="button" type="submit" value="提交" />
    </form>
    <script>
    document.getElementById("textArea").focus();
    var chackTextarea = function (obj, num, objTip) {
        setInterval(function () {
            // \x00-\xff所有拉丁字符 ^除了 g全局匹配 用**替换掉其中的汉字“abc汉子”替换成“abc****”
            var newvalue = obj.value.replace(/[^\x00-\xff]/g, "**");        
            if (newvalue.length >= 0) {
                if (newvalue.length > num) {
                    objTip.innerHTML = "已超出<em>" + parseInt((newvalue.length - num)/2) + "</em>个字!";
                    objTip.style.color = "#f00";
                    document.getElementById("button").disabled = "disabled";
                } else {
                    objTip.innerHTML = "你还能输入<em>" + parseInt((num - newvalue.length)/2) + "</em>个字!";
                    objTip.style.color = "#588905";
                    document.getElementById("button").disabled = "";
                }
            } else {
                document.getElementById("button").disabled = "disabled";
            }
        }, 100);
    }
    chackTextarea(document.getElementById("textArea"), 280, document.getElementById("tip"));
    </script>
    </body>
    </html>
  • 相关阅读:
    JavaScript之数学对象Math
    JavaScript之数据类型转换
    JavaScript之操作符
    JavaScript之基本语句
    JavaScript之基本概念(二)
    JavaScript之基本概念(一)
    使用velero进行kubernetes灾备
    minikube配置CRI-O作为runtime并指定flannel插件
    使用thanos管理Prometheus持久化数据
    linux开启tcp_timestamps和tcp_tw_recycle引发的问题研究
  • 原文地址:https://www.cnblogs.com/jzm17173/p/2575153.html
Copyright © 2011-2022 走看看