如何防止在达到一定字符数后向文本区域输入内容?

2024-06-05

使用下面的代码,任何超过指定最大值的输入都将被删除。但这会产生一种效果,即键入字符后立即将其删除。我宁愿简单地阻止输入字符。

<textarea  id="textarea" onKeyDown="limitText()" onKeyUp="limitText()">
</textarea> 
<span name="charcount_text" id="charcount_text"></span>

  <script type="text/javascript">
    function limitText() {
      var count = document.getElementById('textarea').value.length;
      var remaining = 4000 - count;
      if(remaining <= 0) {
        document.getElementById('charcount_text').innerHTML = '4000 character limit reached.' ;
        document.getElementById('textarea').value = document.getElementById('textarea').value.substring(0, 4000);
      } else if(remaining <= 50) {
        document.getElementById('charcount_text').innerHTML = '4000 character limit, ' + remaining  + ' remaining.';
      } else {
        document.getElementById('charcount_text').innerHTML = '';
      }
    }
  </script>

Use the maxlength属性:

<textarea  id="textarea" maxlength="4000" onkeyup="limitText()"></textarea>

function limitText() {
  var ta= document.getElementById('textarea'),
      count= ta.value.length,
      ml= ta.maxLength,
      remaining= ml - count,
      cc= document.getElementById('charcount_text');

  if(remaining <= 0) {
    cc.innerHTML = ml+' character limit reached.' ;
  } else if(remaining <= 50) {
    cc.innerHTML = ml+' character limit, ' + remaining  + ' remaining.';
  } else {
    cc.innerHTML = '';
  }
}

Fiddle http://jsfiddle.net/yhocak08/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何防止在达到一定字符数后向文本区域输入内容? 的相关文章

  • 根据输入字段的字符数动态扩展输入类型“文本”的高度

    与下面的 JSFiddle 类似 我将其添加为书签 但不知道原始问题从哪里出现 http jsfiddle net mJMpw 6 http jsfiddle net mJMpw 6
  • 为什么 JavaScript 字符串有两种类型?

    这简直是 狠狠地刺伤了我 我不知道是否所有浏览器都是如此 我没有任何其他有能力的浏览器可以测试 但至少 Firefox 有两种字符串对象 打开 Firebugs 控制台并尝试以下操作 gt gt gt a a gt gt gt new St
  • 具有最大高度的 div 内的表格

    我想要一个可滚动的表格 为了实现这一点 我包装了一个 table into a div with a max height and overflow auto 除此之外 div has display inline block以确保 div
  • JavaScript HTTP 请求失败

    有人可以看一下下面的代码帮助我找出我做错了什么吗 我收到这个错误 错误 XMLHttpRequest readyState 1 超时 0 withCredentials false 上传 XMLHttpRequestUpload respo
  • 在 Javascript 变量声明中使用逗号[重复]

    这个问题在这里已经有答案了 我刚刚遇到以下代码 function showMatch str reg var res matches while true matches reg exec str if matches null break
  • 页面不等待 SweetAlert 确认窗口的响应

    我正在尝试升级我的 JavaScriptconfirm 使用的动作甜蜜警报 https sweetalert js org 目前我的代码是这样的 a href delete php id 100 Delete a 这将等待用户确认 然后再导
  • JS:替换对象中与模式匹配的所有字符串值?

    我正在寻找一种有效的方法来替换对象内的值 如果它们与特定模式匹配 var shapes square attr stroke stroke width circle attr fill stroke width 例如 我希望能够将所有 图案
  • 用于读取 HTML 中替代文本(例如罗马数字)的 ARIA 属性

    在我的 HTML 文档中 我使用罗马数字 例如 MMXV 2015 有没有办法通知屏幕阅读器以另一种方式解释某些文本 例如 罗马数字为 2015 而不是 M M X V 我的猜测是会有 ARIA 属性 但我似乎找不到 例如
  • zurb 基金会是否可以拥有完整的行宽度

    我正在使用 Foundation 3 构建响应式网站 但我想让页脚和导航背景宽度占据整个宽度 我将我的行命名为 class row navigation class row footer 我尝试寻找如何解决这个问题 但我没有选择 我假设这是
  • 在 React 中使用内联样式和纯 CSS 字符串

    我正在ReactJS中重写一个基于AngularJS的现有应用程序 在应用程序中 用户可以提供 CSS 样式字符串来设置某些元素的样式 在 AngularJS 中这没有问题 我只是将 style 属性设置为给定的字符串 在 ReactJS
  • javascript 如何将对象深度绑定到新的“this”值

    我有一个值 它可能是一个原语或一个函数或一个递归地包含原语 函数 对象的对象 Given a theThis参数 我如何将可能在我的值内的所有函数深度绑定到theThis 我尝试过类似的东西 function deepBind o ths
  • 在express中设置静态javascript文件的内容类型

    我在用express使用 es6 模块提供带有 js 文件的页面 关于 es6 模块 https jakearchibald com 2017 es modules in browsers https jakearchibald com 2
  • AngularJS 与 Apache Tiles

    我在我的项目中使用 Spring MVC 和 AngularJS AngularJs 可以吗 routing和 ngView 被用来代替or与阿帕奇瓷砖框架 据我所知 使用 routing 和 ngView 我们创建模板并在单页应用程序中重
  • 使用 CSS2 将

    有没有一个好的跨浏览器解决方案来拆分单个 ul 分成两列 或者最好的方法仍然是使用两个相邻浮动的单独列表 我正在寻找单一的解决方案 因此如果需要替代 HTML 来支持旧版浏览器 则不允许使用 CSS3 优点 要求浏览器支持IE7 FF3 我
  • 使用VBA在网页中填写用户名和密码

    这是我第一次尝试通过 VBA 浏览 IE 浏览器 我在尝试着 转到此网页https hb2 bankleumi co il e Login html https hb2 bankleumi co il e Login html 填写用户名
  • Json(/hash) 到 ruby​​ 对象?

    在 Javascript 中 您可以将 json 作为对象访问 person name first Peter last Parker person name first 在红宝石中我必须像这样使用它 person name first 是
  • asp.net linkbutton onclientclick 和 postback

    当我将 ASP NET LinkBut ton 与 OnClientClick 属性一起使用时 我遇到了一些奇怪的行为 ASPX
  • React Table - useRowSelect 的单选输入

    如何在 React Table 中使用单选输入而不是复选框作为可选表 有一个复选框但没有单选按钮的示例 https github com tannerlinsley react table blob master examples row
  • 如何使用RxJsdistinctUntilChanged?

    我正在开始使用 RxJs 使用 v5 beta 但不知何故我不知道如何使用distinctUntilChanged 如果我在 babel node 中运行下面的代码 其输出是 a 1 key a state 1 Next value 42
  • Gridstack.js 从 JSON 获取位置

    我现在正在与Gridstack js https github com troolee gridstack js这对我有好处 但是 总是有一个但是 有人知道我如何定位 JSON 数组中定义的 grid stack item 吗 HTML 示

随机推荐

  • iTunes connect 不允许输入多行描述

    我刚刚向 App Store 提交了我的第一个应用程序 但 iTunes Connect 中的描述字段存在问题 它不允许我输入多行值 我已经尝试了一切 从不同的编辑器复制粘贴 手动输入等 如果有一行 例如 Hello world 则保存成功
  • 右键单击 QPushButton 上的 contextMenu

    对于我的应用程序 我在 Qt Designer 中创建了一个 GUI 并将其转换为 python 2 6 代码 关于一些QPushButton 与设计器创建 我想添加右键单击上下文菜单 菜单选项取决于应用程序状态 如何实现这样的上下文菜单
  • 将表从 postgres 数据库同步/导入到 elasticsearch 的正确方法是什么?

    我想将 postgres 数据库中的一些表导入到 Elastic search 中 并使这些表与 elastic search 中的数据保持同步 我看过 udemy 上的课程 还与一位对此问题有丰富经验的同事进行了交谈 以了解最好的方法是什
  • jQuery 问题:它的真正含义是什么?

    function window undefined jquery code jQuery window 它到底意味着什么 是不是也意味着 document ready 或者只是两种不同的东西 已经有两个答案 但这是我对代码缺失端的猜测 fu
  • Rspec:测试救援

    尝试测试我的函数是否能够正确地从异常中解救 更改参数 文件名 然后重试一次 我可以让函数接收第一次尝试 但无法让它接收第二次尝试 控制器 begin video get video video id rescue matches video
  • 将 Angular v12 升级到 v13 时出现“模块未找到”错误

    嗨 开发者和贡献者 我正在努力找出以下错误的问题所在 src app models type ModelType ts 2 0 44 错误 找不到模块 错误 导出字段无法解析目录 请求为 当我将 Angular 版本从 v12 升级到 v1
  • shell 脚本中数组的最大元素及其索引

    如何在 shell 脚本中从数组中找到最大元素及其索引 我有一个数组 a 2 2116565098 2 1238242060 2 1747941240 2 3201010162 2 3677779871 1 8126464132 2 124
  • Bootstrap 3 - 使用垂直滚动条水平拖动元素,overflow-y:滚动

    在我的失败之后上一篇文章 https stackoverflow com questions 23586926 bootstrap grid with scrollable affixed column noredirect 1 comme
  • Angular UI.Bootstrap 单选按钮在 ng-repeat 中表现得很奇怪[重复]

    这个问题在这里已经有答案了 我在 Angular 的 ui bootstrap 中动态生成无线电模型的选项时遇到问题 我想我可以简单地对数组进行 ng repeat 使用 btn radio 属性的内容 如下所示 in the contro
  • 为什么 Cloud Composer 中会自动生成一个名为“airflow_monitoring”的 DAG?

    在 GCP Composer 上创建 Airflow 环境时 有一个名为airflow monitoring自动创建 即使删除后也会回来 为什么 怎么处理呢 我是否应该将此文件复制到我的 DAG 文件夹中并辞职以使其成为我的代码的一部分 我
  • 使用 python 从 CSV 创建字典

    我有一个 CSV 格式的文件 其中 A B 和 C 是标题 我如何以Python方式将此CSV转换为以下形式的字典 A 1 B 4 C 7 A 2 B 5 C 8 A 3 B 6 C 9 到目前为止我正在尝试以下代码 import csv
  • “.builders['browser']”应该具有必需的属性“class”

    使用 npm install 成功安装依赖项后 在运行服务器时出现以下错误 Schema validation failed with the following errors Data path builders browser shou
  • 启动时加载 RabbitMQ 配置

    如何在启动时加载 RabbitMQ 配置以确认已创建代理对象 队列 交换 绑定 用户 虚拟主机 权限和参数 根据 RabbitMQ 文档 可以通过以下方式完成load definitions http www rabbitmq com ma
  • 如何获取PHP版本?

    有没有办法检查从该脚本中执行特定脚本的 PHP 版本 例如 下面的代码片段 version way to get version print version 将在一台机器上打印 5 3 0 在另一台机器上打印 5 3 1 version p
  • cllocation 和 mkreversegeocoder

    我尝试使用 cllocation 和 mkreversegeocoder 检索城市名称 在我的 viewdidload 方法中 我是 cllocationmanager self locManager CLLocationManager a
  • 尝试校准keras模型

    我正在尝试通过 Sklearn 实现来校准我的 CNN 模型CalibratedClassifierCV 尝试将其包装为KerasClassifier并覆盖预测功能但没有成功 有人可以说我做错了什么吗 这是模型代码 def create m
  • C#9 顶级语句文件上的属性

    我正在尝试向顶级语句文件添加属性 但没有找到任何相关信息 是否可以 对于某些上下文 我想仅在该文件中禁用规则 SuppressMessage StyleCop CSharp LayoutRules SA1516 ElementsMustBe
  • 实体框架中的重复键异常?

    我试图捕获当我将具有给定用户名的现有用户插入数据库时 引发的异常 正如标题所说 我正在使用 EF 当我尝试将用户插入数据库时 引发的唯一异常是 UpdateException 如何提取此异常以识别其是否是重复异常或其他异常 catch Up
  • 为什么响应式图像需要“高度:自动”?

    是否有必要定义height auto现在 原因是什么 img max width 100 height auto Thanks 在没有明确设置高度尺寸的图像上 它实际上默认为自动高度 所以如果你设置max width 100 高度将由浏览器
  • 如何防止在达到一定字符数后向文本区域输入内容?

    使用下面的代码 任何超过指定最大值的输入都将被删除 但这会产生一种效果 即键入字符后立即将其删除 我宁愿简单地阻止输入字符