使用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);
}

 

相关推荐

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

    2024-07-15 20:36:03       21 阅读
  2. js 限制字数机器提示

    2024-07-15 20:36:03       33 阅读
  3. 前段js解决文本框录入保留多位小数设置

    2024-07-15 20:36:03       38 阅读
  4. 需求实现:字数限制500字

    2024-07-15 20:36:03       20 阅读
  5. 配置 Node.js 内存限制

    2024-07-15 20:36:03       23 阅读
  6. Mongodb索引使用限制

    2024-07-15 20:36:03       25 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-15 20:36:03       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-15 20:36:03       71 阅读
  3. 在Django里面运行非项目文件

    2024-07-15 20:36:03       58 阅读
  4. Python语言-面向对象

    2024-07-15 20:36:03       69 阅读

热门阅读

  1. Spring boot 2.0 升级到 3.3.1 的相关问题 (一)

    2024-07-15 20:36:03       18 阅读
  2. C++惯用法:do...while(0)的妙用

    2024-07-15 20:36:03       23 阅读
  3. python:罗马数字转整数

    2024-07-15 20:36:03       19 阅读
  4. 如何设置单核测试

    2024-07-15 20:36:03       18 阅读
  5. 模板方法原理与C++实现

    2024-07-15 20:36:03       23 阅读
  6. kmeans.fit_predict 和 kmeans.fit有什么区别

    2024-07-15 20:36:03       20 阅读
  7. C++ --> 类和对象(三)

    2024-07-15 20:36:03       23 阅读
  8. 用Python爬虫能实现什么?得到什么?

    2024-07-15 20:36:03       21 阅读
  9. JVM堆内存的结构,YGC,FGC的原理

    2024-07-15 20:36:03       21 阅读