jquery-textarea字数提示效果

xyc

   平时做输入文本框的时候好多都是需要限制字数和显示输入字符的数量，今天咱们就来说下文本域的字数提示效果的实现方式。
    效果：
   
     HTML：
     

[HTML] 纯文本查看 复制代码

	<div class="content">
		<textarea class="textarea" placeholder="请输入内容"  maxlength="60" id="context"></textarea>
		<div class="input-num">
			<span id="tips">0</span>
			/60字
		</div>
	</div>

     css样式：
     

[CSS] 纯文本查看 复制代码

.content {
		    position: relative;
		    width:500px;
		    height:160px;
		}
		.content .textarea {
		    font-size: 14px;
		    color: #333;
		    padding: 12px 15px;
		    width: 100%;
		    height: 100%;
		    border: solid 1px #e7e7e7;
		    vertical-align: top;
		    resize: none;
		    box-sizing: border-box;
		}
		.content .input-num {
		    display: block;
		    position: absolute;
		    bottom: 6px;
		    right: 10px;
		    font-size: 12px;
		    color: #999;
		}

     js代码：
     

[JavaScript] 纯文本查看 复制代码

$(function () {
    var text = $('#context').val();
    var len = text.length;
    $('#tips').html(len);
    $('#context').keyup(function () {
        var text = $(this).val();
        len = text.length;
        if (len > 60) {
            return false;
        }
        $("#tips").html(len);
    })
})

   以上就是文本域的显示字数提示的效果实现代码，希望可以帮助到大家！

范范

实用， 支持楼主