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

How do you count characters of a textarea within a dialog?

本文关键字：区域 文本 字符 中文 对话框 何计算 计算      更新时间：2023-09-26

我有以下代码：

<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中不起作用，并且在将其放入对话框中时获取长度变量也不起作用。

更改对话框以包含计数的 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"/>

您可能希望为此使用委派。 你可以做这样的事情：

$(document).on('input propertychange', '#textarea', function() {
    var text = $('#textarea').val();
    if (text.length > 255) {
        $('#textarea').val(text.substring(0,255));
    }
    //Maybe some code to display a message to the user, or update a character count element or something?
});
相关文章：