微博剩余字数输入统计

预览效果

HTML代码

<div class="cl share_weibo_wp" style="">
  <div class="cl">
    <h4 class="l">分享到微博</h4>
    <span class="r count_txt">还能输入<strong id="currentLength">120</strong>字</span>
  </div>
  <textarea onkeyup="checkLength(this);" class="textarea radius inputstyle" name="" cols="" rows=""></textarea>
</div>

CSS代码

body{ background-color:#71C5F2}
.share_weibo_wp{width:480px; padding:20px; background-color:#fff; margin-left:auto; margin-right:auto; margin-top:20px;-khtml-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;behavior: url(ie-css3.htc)}
.count_txt{color: #B5B5B5;text-align: right}
.count_txt strong {font-family: georgia;font-size: 24px; padding: 0 2px}
.inputstyle {height: 75px;line-height: 18px;overflow-x: hidden;overflow-y: auto;width: 472px}

JS代码

function checkLength(which) {
  var maxChars = 120;
  if (which.value.length > maxChars)
  which.value = which.value.substring(0,maxChars);
  var curr = maxChars - which.value.length;
  document.getElementById("currentLength").innerHTML = curr.toString()}

打包下载