如何添加单词计数文本区域字段

时间:2015-03-05 05:51:37

标签: jquery

我在单词计数方面有一个问题,我在文本区域使用文本编辑器。我正在使用以下代码但我没有得到任何回复请任何人帮助我

<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/shared/styles/text-editor.css" charset="utf-8" />

  <div class="form-group" id="texteditor">
    <label class="grey">Product Description<i class="icon icon-asterisk mandatory"></i></label>
    <s:textarea name="productDescription" id="productDescription" cols="" rows="3" cssClass="form-control jqte-test count" onkeyup="countChar('productDescription','experienceDesc')" onclick="countChar('productDescription','experienceDesc')" maxlength="120" cssStyle="resize:none;" />
     <div id="experienceDesc" align="right" style="margin-right: 10px;"></div>           
  </div>

<script type="text/javascript" src="<%=request.getContextPath()%>/shared/scripts/jquery-te-1.3.2.min.js" charset="utf-8"></script>
<script>
        $('.jqte-test').jqte();
    </script>
<script>
function countChar(val,divId) {
     var len = $('#'+val).val().length;
    if (len > 500) {
      val.value = val.value.substring(0, 500);
    } else {
       var a=500 - len;
       var count = "<span style='color:red'>"+a+"</span>";
       var text ="You have";
       var count1 = "<span style='color:grey'>"+text+"</span>";
       var text1 ="characters left";
       var count2 = "<span style='color:grey'>"+text1+"</span>";
      $('#'+divId).html(count1+" "+count+" "+count2);
    }
}
</script>

2 个答案:

答案 0 :(得分:0)

希望这就是你的意思伙伴。试试这个:

$("#productDescription").jqte({
    change: function () {
        countChar('productDescription', 'experienceDesc');
    }
});

function countChar(val, divId) {
    var len = $('#' + val).val().length;
    if (len > 500) {
        val.value = val.value.substring(0, 500);
    } else {
        var a = 500 - len;
        var count = "<span style='color:red'>" + a + "</span>";
        var text = "You have";
        var count1 = "<span style='color:grey'>" + text + "</span>";
        var text1 = "characters left";
        var count2 = "<span style='color:grey'>" + text1 + "</span>";
        $('#' + divId).html(count1 + " " + count + " " + count2);
    }
}

小提琴here

答案 1 :(得分:0)

 <textarea id="field" ></textarea>
 <div id="charNum"></div>

$('#field').keyup(function () {
  var max = 15;
  var len = $(this).val().length;
  if (len >= max) {
    $('#charNum').text(' you have reached the limit');
     $(this).val($(this).val().substring(0, 15));
  } else {
    var char = max - len;
    $('#charNum').text(char + ' characters left');
  }
});

小提琴here