javascript - 如何计算对话框中文本区域的字符数？

Question

我有以下代码:

<script type="text/javascript">                   
function createDialog(text, id) {
    return $("<div class='dialog'><textarea id='textarea' class ='texbox' name='textarea' value='text'>" + text + "</textarea></div>"
      .dialog({
        dialogClass: "dialogStyle",
        title: "Edit Description",
        resizable: false,
        position: {
          my: "right+240 top-200",
          at: "center",
          of: $("body"),
          within: $("body")
        },
        height: 200,
        width: 300,
        modal: true,
        buttons: {
          "Save": function() {
            var product = $(this).find('textarea [name="textarea"]').val();
            $(this).dialog("close");
            $("#" + id).val(product);
          },
          Cancel: function() {
            $(this).dialog("close");
          }
        },
        overlay: {
          opacity: 0.5,
          background: "black"
        }
      });
    }
</script>

如何在对话框中的文本区域中合并最多 255 个字符的字符计数？ 我已经四处寻找代码，但将其放在函数 createDialog 中将不起作用，并且将其放入对话框中时获取长度变量也不起作用。

Answer 1

更改对话框以包含计数的 DIV:

    return $("<div class='dialog'><textarea id='textarea' class ='texbox' name='textarea' value='text'>" + text + "</textarea><div>Characters: <span class='charcount'>0</span></div></div>"

然后添加以下JS:

$(document).on("keyup edit paste", ".dialog .texbox", function(e) {
    var charcount = $(this).val().length;
    if (charcount > 255) {
        e.preventDefault();
        return;
    }
    $(this).closest(".dialog").find(".charcount").text(charcount);
});

function createDialog(text, id) {
  return $("<div class='dialog'><textarea id='textarea' class ='texbox' name='textarea' value='text' placeholder='"+text+"'></textarea><div>Characters: <span class='charcount'>0</span></div></div>")
    .dialog({
      dialogClass: "dialogStyle",
      title: "Edit Description",
      resizable: false,
      position: {
        my: "right+240 top-200",
        at: "center",
        of: $("body"),
        within: $("body")
      },
      height: 200,
      width: 300,
      modal: true,
      buttons: {
        "Save": function() {
          var product = $(this).find('textarea[name="textarea"]').val();
          $(this).dialog("close");
          $("#" + id).val(product);
        },
        Cancel: function() {
          $(this).dialog("close");
        }
      },
      overlay: {
        opacity: 0.5,
        background: "black"
      }
    });

}

$("#button").click(function() {
    createDialog("This is a message", "foo");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<button id="button">Show dialog</button>
<input id="foo"/>