码迷,mamicode.com
首页 > 其他好文 > 详细

输入框输入字数限制

时间:2017-08-07 13:36:55      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:resize   this   bst   button   height   length   border   nbsp   type   

<h2>亲,说说你在做什么,想什么</h2>
<div id="div_editor">
    <textarea id="txt_content" rows="2" cols="10"></textarea>
    <div class="d-last">还能输入140字</div>
</div>
<input type="button" id="btn_submit" value="确定">
h4 {
    color:#B1B1B1;
    font-weight:100;
    font-size:14px;
}
#div_editor {
    width:400px;
    border:1px solid #A9A9A9;
}
#div_editor textarea {
    border:0px;
    width:398px;
    height:45px;
    outline:0px;
    resize:none;
}
#div_editor div.d-last {
    text-align:right;
    font-size:10px;
    color:#B1B1B1;
    display:none;
}
#btn_submit {
    color:white;
    background-color:#8AC328;
    width:80px;
    height:25px;
    border:1px solid #9CC868;
    margin:1px;
}
$(function() {

     $("#div_editor textarea").focus(function() {

         $(this).css("height", "60px");
         $("#div_editor div.d-last").show();
         $("#div_editor").css("borderColor", "#B4E6FA");

     }).blur(function() {

         $(this).css("height", "45px");
         $("#div_editor div.d-last").hide();
         $("#div_editor").css("borderColor", "#A9A9A9");

     }).keyup(function() {

         var c = $(this).val();
         if (c.length > 140) {
             c = c.substr(0, 140);
             $(this).val(c);
         }
         var last = 140 - c.length;
         $("#div_editor div.d-last").text("还能输入" + last + "字");
     })


 });

 

输入框输入字数限制

标签:resize   this   bst   button   height   length   border   nbsp   type   

原文地址:http://www.cnblogs.com/phpfensi/p/7298499.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!