charCount.js实现输入文字限制

最新推荐文章于 2023-09-21 19:01:01 发布

理个以哈呦

最新推荐文章于 2023-09-21 19:01:01 发布

阅读量1.5k

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="../jquery/jquery-1.8.3.min.js"></script>
<script src="js/js.charCount.com/charCount.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // default usage
    $("#id-textarea-default").charCount();
    // custom usage
    $("#id-textarea-custom").charCount({
        allowed:150,
        warning:120,
        counterText:'剩余字数: '
    });
});
</script>
<style>
body { margin:0; padding:20px 40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; }
.clear { clear:both; }
/* Character Count styles */
form { width:500px; }
label { display:block; font-size:14px; }
textarea { width:490px; height:60px; padding:3px; color:#555; font:16px Arial, Helvetica, sans-serif; }
form div { position:relative; margin:1em 0; }
form .counter { position:absolute; right:0; top:0; font-size:20px; font-weight:bold; color:#ccc; }
form .warning { color:#600; }
form .exceeded { color:#e00; }
</style>
</head>
<body>
    <form id="form" method="post" action="">
        <h2>默认风格文本框</h2>
        <div>
            <label for="message">请输入用户信息</label>
            <textarea id="id-textarea-default" name="id-textarea-default"></textarea>
        </div>
        <h2>自定义风格文本框</h2>
        <div>
            <label for="message">请输入用户信息 (Limited to 150, Warning at 120)</label>
            <textarea id="id-textarea-custom" name="id-textarea-custom"></textarea>
        </div>
    </form>
</body>
</html>

理个以哈呦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
charCount.js实现输入文字限制

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><script src="../jquery/jquery-1.8.3.min.js"></script><script src="js/js.charCount.com/charCount.js"><
复制链接

扫一扫

专栏目录