首页
Web开发
Windows程序
编程语言
数据库
移动开发
系统相关
微信
其他好文
会员
首页
>
其他好文
> 详细
文本框如何实现限制输入字数效果
时间:
2015-12-31 10:21:47
阅读:
158
评论:
0
收藏:
0
[点我收藏+]
标签:
在很多网站都有这样的功能,那就是可以限制在文本框内输入文字的数量,有的是让文字不超过多少字,有的是文字不能少于多少字,原理基本是一样的,下面就介绍一下如何是用JS实现此功能,代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
window.onload=function()
{
var textarea=document.getElementById("mytext");
textarea.onkeyup=function()
{
checkMax(textarea,10);
}
}
function checkMax(textarea,maxLength)
{
var str=textarea.value;
var strlen=str.length;
if(strlen>maxLength)
{
alert(‘字数超过限制‘);
eval(textarea.value=str.substr(0,maxLength));
}
}
</script>
</head>
<body style="text-align:center">
<h1>请在文本框内输入文本测试功能</h1>
<textarea name="textfield" cols="60" rows="10" id="mytext"></textarea>
</body>
</html>
以上代码实现了限制文字输入数量功能,并且可以将文本框内输入的文本截取至指定的数量。简单介绍一下实现过程:
一.功能的实现的核心是checkMax()函数,此函数具有两个参数,一个参数是要限制输入文本数量的对象,一个是要限制的数量。
二checkMax()函数体内功能介绍如下:
var str=textarea.value;
获取文本框内的输入值,同时计算出来输入值的长度。下面的if语句用来判断当前输入文本的长度是否超过了指定的限制长度,如果超过会弹出一个警告框,并且通过substr()将超出的部分截取掉。
三.window.onload=function() {...}的作用是当文档加载完成后才可以执行函数体内的代码,否则,由于代码是顺序执行,会导致 document.getElementById("mytext")无法获取对象。然后为文本框的onkeyup事件绑定事件处理函数。
文本框如何实现限制输入字数效果
标签:
原文地址:http://www.cnblogs.com/mmx-jiayou/p/5090836.html
踩
(
0
)
赞
(
0
)
举报
评论
一句话评论(
0
)
登录后才能评论!
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
更多
分布式事务
2021-07-29
OpenStack云平台命令行登录账户
2021-07-29
getLastRowNum()与getLastCellNum()/getPhysicalNumberOfRows()与getPhysicalNumberOfCells()
2021-07-29
【K8s概念】CSI 卷克隆
2021-07-29
vue3.0使用ant-design-vue进行按需加载原来这么简单
2021-07-29
stack栈
2021-07-29
抽奖动画 - 大转盘抽奖
2021-07-29
PPT写作技巧
2021-07-29
003-核心技术-IO模型-NIO-基于NIO群聊示例
2021-07-29
Bootstrap组件2
2021-07-29
友情链接
兰亭集智
国之画
百度统计
站长统计
阿里云
chrome插件
新版天听网
关于我们
-
联系我们
-
留言反馈
© 2014
mamicode.com
版权所有 联系我们:gaon5@hotmail.com
迷上了代码!