1.背景
在开发中遇到一个html的知识,大致需求是这样的:用户信息页面有一栏是用户备注,数据库设计可以存500个字。由于发布时没有把这个TextArea的可输入字数限制住,导致用户在输入超过500个字时程序抛异常,提示操作的数据太大。出了问题不怕,找到问题出现的症结对症下药就能迎刃而解。
2.相关知识点
1.html 输入元素可输入字符控制。
2.使用Javascript对TextArea的输入字数进行动态控制。
3.正文
大家知道,对于普通的文本框,比如<input type="text" name="userName"/>,对于这种的type=“text”的,给相应元素设置一个属性(maxLength=x)即可。第二种实现方式是在表单提交时使用正则表达式进行验证,判断TextArea 的字数是否超出相应的限额,这也算一种方法,不过给人的感觉不好,因为用户在输入的时候并不知道自己还能输入几个字。正是有了这个需求才有了本文,下面结合代码说明如何实现友好的提示。闲言少叙,上代码:
<html>
<head>
<title>JS限制Textarea文本域字符个数</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<SCRIPT LANGUAGE="JavaScript">
<!--//
function textCounter(field, countfield, maxlimit) {
// 函数,3个参数,表单名字,表单域元素名,限制字符;
if (field.value.length > maxlimit)
//如果元素区字符数大于最大字符数,按照最大字符数截断;
field.value = field.value.substring(0, maxlimit);
else
//在记数区文本框内显示剩余的字符数;
countfield.value = maxlimit - field.value.length;
}
//-->
</SCRIPT>
</head>
<body>
<form name=myform action="">
<textarea name="message" cols="28" rows="5" onKeyDown="textCounter(message,remLen,6);" onKeyUp="textCounter(message,remLen,6);"></textarea>
您还可以输入:<input name="remLen" type="text" value="6" size="5" readonly="readonly">个字符
</form>
</body>
</html>
,由于功能比较简单,相信各位都能看得懂。这里边最主要的地方就是给相应的TextArea控件绑定检测函数,让用户在输入之后马上可以看到自己还能输入多少字符。据我所知,html5已经将这个考虑进去了,在html5的元素中已经有了maxlength这个属性,如下图:
页面运行截图:
,作为笔记记录以防备忘,也希望能帮到各位同样需求的朋友。html源码可以直接复制或者下载附件。
- 大小: 171.9 KB
- 大小: 17.3 KB
分享到:
相关推荐
textarea元素在chrome等浏览器下可以被拖拉从而改变大小,对于查看textarea里面的内容来说相当方便,但是有时候,我们为了保持网页的美观,不得不想要禁掉这个功能,禁止用户随意拉动textarea的大小
通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制,简单而实用。假设我们有一个id为 txta1 的textarea文本区,我们可以通过以下代码限制它的键盘输入字数为10个字(汉字或其他小角字符): ...
改变文本域textarea里的字体颜色的方法
作为多行文本域功能来讲,textarea满足了我们大部分的需求。然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。textarea总是很自信地显摆它的滚动条,高度固执地岿然不动。所以,有时候,...
解决Flex在非主应用程序中,textarea和input不能输入中文的 方法。
表单控件——文本域textarea</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css
这是一个令textarea高度自适应的插件,使用jquery 去掉令人非常讨厌的滚动条;
表单美化之textarea文本域背景的美化
介绍了JS限制Textarea文本域字符个数的具体实现,有需要的朋友可以参考一下
html页面实现给textarea等等的文本框内添加可动态输入文字的多行下划线,类似于打印出来的学生考试试卷答题的那种多行横线效果一样,可在页面文本框内横线输入框上随意输入文字,调用浏览器打印文本时也可完整正常的...
主要为大家介绍下如果在textarea文本域中显示HTML代码,其实多用于网页编辑的开发,大家可以参考下
jQuery textarea文本框输入文字字数限制提示代码,设置固定输入字符,实时计算显示已经输入多少字符。
自增长的文本域 随着用户输入的字符增加文本域和长度
自己写的一个小东西 前段时间自己要用在网上下载了一个 不过不好用,自己就写了一个 自我感觉还不错,而且对于限制输入的东西可以根据不同的情况自己修改,方便大家 方便你我他!
NULL 博文链接:https://diaoweili.iteye.com/blog/774179
控制textarea文本长度,限制输入字数(带统计)的特效! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
angularjs实现textarea文本输入字数限制功能
主要是为了页面没有提交按钮 无法实现回车自动提交所写在功能,屏蔽了表单中文本域回车导致提交功能。
本文为大家介绍下textarea文本域宽度和高度(width、height)如何自动适应变化处理,下面有个不错的示例,感兴趣的朋友可以参考下