使用js对文本框设置字数限制

简介: 使用js对文本框设置字数限制

前端语言中,还是有很多内容可以用到对字数做限制的。通过textarea输入框进行限制。下面就是实现的步骤,相对来说,还是比较简单的,大家可以借鉴一下。


HTML 代码:

<textarea oninput="numLimit(200,true)" id="fonts" name="" maxlength="200" style="resize" ;resize: none;
      placeholder="请输入需求的相关描述"></textarea>
    <span id="fontsLimit" style="float: right;;position: relative;left: -10px;top: -20px;">0/200</span>

css代码:

  #fonts {
        margin-top: 10px;
        width: 92%;
        height: 120px;
        margin-left: 4%;
        outline: none;
        border: 0;
        border-radius: 5px;
      }
 
      #fontsLimit {
        font-size: 10px;
        padding-right: 10px;
      }

js 代码:

// 文本域的字数限制
function numLimit(numLimit) {
  var text = $("#fonts").val();
  var textLength = 0;
  if (text != "undefined" && text != "" && text != null) {
    textLength = text.length;
  }
  
    $("#fonts").css('background-color', '#fff');
 
  $("#fontsLimit").html(textLength + "/" + numLimit);
}
目录
相关文章
|
6月前
|
JSON JavaScript 前端开发
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
|
2月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
21天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
189 4
|
1月前
|
JavaScript 前端开发
Javascript:获取、设置复选框的勾选状态
Javascript:获取、设置复选框的勾选状态
47 1
|
3月前
|
JavaScript 前端开发 Ubuntu
如何在 VPS 上安装 Express(Node.js 框架)并设置 Socket.io
如何在 VPS 上安装 Express(Node.js 框架)并设置 Socket.io
60 0
|
3月前
|
缓存 JavaScript 前端开发
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)更新时间(2020-10-29)
|
4月前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
57 1
|
5月前
|
XML JavaScript 前端开发
如何在JavaScript中设置多个样式属性?
【6月更文挑战第29天】如何在JavaScript中设置多个样式属性?
454 3
|
5月前
|
JavaScript
JS移动端设置mouseover,mouseleave有效么
JS移动端设置mouseover,mouseleave有效么
77 1
|
5月前
|
JavaScript
【干货】JS 限制input文本框输入
【干货】JS 限制input文本框输入