程序员经验分享-hwhale

对粘贴到输入字段的文本进行字符计数的正确方法是什么？

2023-12-11

我有一个带有输入计数器的自动扩展表单字段，其中文本区域具有 maxLength。如果在其中键入或粘贴多行，则 onKeyUp 字段会自动扩展该区域并触发计数的重新计算。这工作正常，但当我故意粘贴比允许的 1024 个字符更长的文本（1029 个字符）时，就会发生不一致。

处理输入的正确方法是什么，真实长度是多少？

我省略了不相关的 CSS 和 PHP 部分，因为该问题独立于该代码而发生。

使用计算javascript样式（len=element.value.length）时，粘贴文本后将正确显示（1024/1024），并且过长文本的最后五个字符将被截断。到目前为止一切顺利，但此后用户必须删除更多的字符，直到计数器显示（1015/1024），然后他/她才能输入一个新字符。因此突然间，虚拟 maxLength 1016 似乎有效了。

建议的解决方案http://stackoverflow.com/questions/462348/不是 100% 的解决方案。这仅出于计数目的替换换行符。使用此代码，粘贴相同文本时计数器现在将显示 (1033/1024)。

代码：

update_textlen(document.getElementById('item.text'));

function update_textlen(field) {
// count the characters used of maxLenght in text
	var maxlen = field.maxLength;
	// var len = field.value.length; // old style
	var len = field.value.replace(/\n/g, "\r\n").length;
	var message = "("+len+"/"+maxlen+")";
	var target = field.id+".len"; // div id for message
	document.getElementById(target).innerHTML = message;
}

function resize_textarea(area) {
//auto expand textarea to fit new number of lines
    area.style.height = "20px";
    area.style.height = (area.scrollHeight)+"px";
}
#item-wrap { 
    width: 502px; 
	margin: 8px 8px 8px 8px; background: #eee; 
    padding: 16px;
    /* background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); */
	/* background: -moz-linear-gradient(top,  #eee,  #ccc); */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}
.form-style-2019 input[type="text"],
.form-style-2019 textarea,
.form-style-2019 select 
{
	background: #FFF;
	margin-left: 3px;
	margin-top: 6px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
	display: block;
	outline: none;
	border: none;
	height: 20px;
	line-height: 20px;
	font-size: 17px;
	padding: 0;
	font-family: Monaco, Courier, mono-space;
}
<div name="item" id="item-wrap">
    <div id="item">
        <form action="#" method="post" name="item.title" onsubmit="return false;" class="form-style-2019">
            text input: <div style="float:right" id="item.text.len">(128/1024)</div>
            <textarea id="item.text" 
                name="input" 
                wrap="virtual" 
                placeholder="text" 
                maxlength="1024" 
                onfocus="resize_textarea(this);update_textlen(this);" 
                onblur="update_textlen(this);resize_textarea(this);" 
                onkeyup="update_textlen(this);resize_textarea(this);" 
                tabindex="1">line1 Bla bla bla
line2 test 123</textarea>
        </form>
    </div>
</div>

粘贴的文本：

dummy text with words repeated until the maximum character count is reached. 
and a line with a tab and return
    occasionally repeated until the maximum character count is reached. 
dummy text with a long line and many words repeated until the maximum character count is reached. dummy text with a long line and many words repeated until the maximum character count is reached. dummy text with a long line and many words repeated until the maximum character count is reached. dummy text with a long line and many words repeated until the maximum character count is 
and a line with a tab and return
    occasionally repeated until the maximum character count is reached. 
and a line with a tab and return
    occasionally repeated until the maximum character count is reached. 
dummy text with a long line and many words repeated until the maximum character count is reached. dummy text with a long line and many words repeated until the maximum character count. 
and the last line with some numbers to see what goes missing 0123456789.

一位线下朋友、经验丰富的后端开发人员是这样向我解释的。由于我们必须对输入进行后处理，并且在许多编程语言中，我们可能必须稍后添加斜杠来转义这些字符，因此使用较低的“虚拟”计数作为长度限制是更明智的做法。因此，在上面的示例中，当在平台上处理该字符串时，需要剪掉 9 个以上的字符才能安全。

在这种情况下，更新后的函数应如下所示：

function update_textlen(field) {
  // count the characters used of maxLenght in text field and report it to a div
  var maxlen = field.maxLength;
  var fval = field.value;
  var flen = fval.length;
  var tlen = fval.replace(/\n/g, "\r\n").length;
  var dlen = tlen - flen;
  var warn = 0;
  // now clip more characters of the end if neeeded 
  if (tlen > maxlen) {
    field.value = fval.substring(0, (maxlen - dlen));
    var tlen = field.value.replace(/\n/g, "\r\n").length;
    var warn = ("input exceeded the " + maxlen + " allowed characters!");
  }
  var counter = "(" + tlen + "/" + maxlen + ")";
  var target = field.id + ".len";
  document.getElementById(target).innerHTML = counter;
  if (warn) {
    alert(warn);
  }
}

update_textlen(document.getElementById('item.text'));

function resize_textarea(area) {
  //auto expand textarea to fit new number of lines
  area.style.height = "20px";
  area.style.height = (area.scrollHeight) + "px";
}
#item-wrap {
  width: 502px;
  margin: 8px 8px 8px 8px;
  background: #eee;
  padding: 16px;
  /* background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); */
  /* background: -moz-linear-gradient(top, #eee, #ccc); */
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}

.form-style-2019 input[type="text"],
.form-style-2019 textarea,
.form-style-2019 select {
  background: #FFF;
  margin-left: 3px;
  margin-top: 6px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  display: block;
  outline: none;
  border: none;
  height: 20px;
  line-height: 20px;
  font-size: 17px;
  padding: 0;
  font-family: Monaco, Courier, mono-space;
}
<div name="item" id="item-wrap">
  <div id="item">
    <form action="#" method="post" name="item.title" onsubmit="return false;" class="form-style-2019">
      text input:
      <div style="float:right" id="item.text.len">(128/1024)</div>
      <textarea id="item.text" name="input" wrap="virtual" placeholder="text" maxlength="1024" onfocus="resize_textarea(this);update_textlen(this);" onblur="update_textlen(this);resize_textarea(this);" onkeyup="update_textlen(this);resize_textarea(this);" tabindex="1">line1 Bla bla bla
line2 test 123</textarea>
    </form>
  </div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

css

对粘贴到输入字段的文本进行字符计数的正确方法是什么？ 的相关文章

  • EXT JS中有全局变量吗

    在 java 和 C 中 我们可以全局存储变量并从项目中的任何位置访问它的值 比如说 我在一个名为Residence我正在保存residenceNumber这是一个INT到一个名为的全局变量houseNumberGlobalVariable

  • 切换 Ag-Grid 中的浮动过滤器？

    我试图通过开关或按钮单击来确定浮动过滤器的显示 看起来很简单 我应该能够在 true 和 false 之间切换 将该值提供给网格选项中的浮动过滤器 然后刷新标题 对吗 不幸的是 网格似乎总是落后一步 当我第一次点击时 什么也没有发生 当我将

  • Karma Webpack - 错误：找不到模块“./test/utilities.js”

    我正在使用 Karma Webpack 进行项目的单元测试 当我跑步时karma start 我有这个错误 Error Cannot find module test utilities js at myproject test campa

  • 为什么这个 fs.readFile 循环没有将其结果推送到我的数组？ [复制]

    这个问题在这里已经有答案了 usr bin env node var fs require fs async require async program require commander program version 0 0 1 usa

  • 递归process.nextTick警告

    作为我的应用程序的一部分 我有以下代码行 process nextTick function pre populate cache with all users console log scanning users table in ord

  • 我们可以为 border-bottom 属性设置渐变颜色吗？ [复制]

    这个问题在这里已经有答案了 我们可以添加渐变颜色吗border bottomhtml块元素的属性 边框应该与此类似 谁能告诉我这在 CSS3 中是可能的吗 我像这样尝试过 但无法让它工作 border gradient border bot

  • 如何在Javascript中保存zip文件的二进制数据？

    我从 AJAX 响应中收到以下响应 这是 zip 文件的响应 请让我知道如何在 Javascript 中保存此 filename zip ZIP 里面有 PDF 文件 我的代码是这样的 ajax url baseURLDownload se

  • 未处理的 Promise 拒绝：push.on 不是函数

    我正在使用离子2 我得到这个打字稿error当尝试设置推送通知时 我从教程中复制了此示例代码 因此预计它可以工作 我一定有什么问题 任何想法请 Unhandled Promise rejection push on is not a fun

  • 将 WooCommerce 属性标签替换为每个的自定义图像

    我正在做一个项目 我需要一些团体的帮助 我正在使用 woocommerce 产品系统 在商店存档页面产品上我显示属性标签 属性值 就像文本一样 属性标签 属性值 例如传输 手动 有没有办法将属性标签显示为图像 我无法添加 html 代码 i

  • 将变量从一个 jsp 发送到另一个 jsp

    我有一个 JSP 文件jsp 1 jsp和另一个 JSP 文件jsp 2 jsp 我已经包括了jsp 2 jsp in jsp 1 jsp using 现在我需要某个元素上的单击事件 在该事件中 我想将字符串变量传输到包含的 jsp 中 假

  • up() 和 down() 与 Ext.getCmp()

    我很困惑我需要在 up down 和 Ext getCmp ID 之间使用哪一个作为 grep 对象 对我来说 定义对象的 ID 并通过 Ext getCmp ID 检索对象更容易 而且代码看起来更干净 例如 console log thi

  • 使用 CSS flexbox 重叠两个居中元素

    我试图将两个元素绝对居中于页面中间 一个元素在另一个元素后面 目的是让页面完全响应 中间有一个圆圈 后面有一个脉冲效果 这是一个小提琴 http jsfiddle net Fy8vD 2003 以下的 html body height 10

  • Python 中 Javascript 的 reduce()、map() 和 filter() 的等价物是什么？

    Python 的等价物是什么 Javascript function wordParts currentPart lastPart return currentPart lastPart word Che mis try console l

  • Javascript 或 Coffeescript 中的“Bucket Fill”算法

    我正在编写一个小coffeescript js应用程序 允许用户设计图标 16x16像素或32X32像素 该图标实际上是一个带有颜色单元的二维数组 单元格可以有颜色或为空 我希望用户能够使用 桶油漆 工具填充空白单元格 代表着 如果用户单击

  • Chrome 开发工具准确计算 CSS 规则值

    无论如何 例如我可以获取要在 Chrome 开发工具中显示的字体的确切像素值 带小数位 吗 In Firebug 如下 当我定义 value 它显示精确的计算值 以像素为单位 最多 4 位小数 In Chrome 开发工具 如下 它仅显示整

  • 与基线和文本区域垂直对齐

    我试图让标签与文本区域中第一行文本的基线对齐 天真的尝试 div style display inline block div

  • 使用 HTML 标签作为背景图像而不是 CSS background-image 属性？

    我需要使用 html img 标签作为背景图像 div 然后我将放置一个 p 的内容 我已经尝试过 但似乎无法让它们正确显示 我使用了相对位置 负值的边距 任何建议或指出我正确的方向将不胜感激 p div img src http www

  • Jquery 脉动改变颜色或图像

    我正在尝试使用 jquery 脉动代码让 div 改变颜色 但我希望它从红色变为黑色 但我听说要做到这一点 你必须下载某个插件 所以我希望它脉动为图片 到目前为止我有这两个代码 img src 36 gif alt width 105 he

  • JQuery 循环遍历动态元素并获取数据值

    我正在尝试使用可折叠面板来完成我的要求 sport on click function var thisId this attr id var thisChildren this sportlist thisChildren each fu

  • 如何使相对div居中？

    我一直在尝试让以下代码工作几个小时 但没有成功 您能帮我将项目 div 居中吗 即使页面放大和缩小时 这是我的 HTML 和 CSS bottom position absolute top 100 left 0 right 0 backg

随机推荐

热门标签