用jsp如何在客户端限制多行文本框的输入长度?最好可以提示用户还可以在输入多少字符?

zylt 2008-07-21 10:17:06
用jsp如何在客户端限制多行文本框的输入长度?最好可以提示用户还可以在输入多少字符?
...全文
1004 15 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
crazywmf 2009-06-25
  • 打赏
  • 举报
回复
gg
ggg
JerryBeckF 2008-07-21
  • 打赏
  • 举报
回复
[Quote=引用 8 楼 zhangjg2124 的回复:]
用JS判断长度
[/Quote]
zhangjg2124 2008-07-21
  • 打赏
  • 举报
回复
用JS判断长度
wangshizhu79 2008-07-21
  • 打赏
  • 举报
回复
我原来写的一段代码
和你的意思差不多

function qingchu() {
var str = document.getElementById("bz").value;
if(str == "100字以内") {
document.getElementById("bz").value = "";
}else {
return false;
}
}
function jiancechangdu() {
var str = document.getElementById("bz").value;
var len = str.length;
if(len < 101) {
document.getElementById("zifu").value = len + "字符";
}else {
document.getElementById("bz").value = str.substr(0,100);
document.getElementById("zifu").value = "100字符";
}
}


<td>
<textarea name="bz" id="bz" style="width: 200px;" onkeyup="jiancechangdu();" onchange="jiancechangdu();" onfocus="qingchu();" oncontextmenu="self.event.returnValue=false">
100字以内
</textarea>
</td>
<td>
<input name="zifu" id="zifu" readonly="readonly" style="width: 40px; border: 0px;">
</td>

sjkof 2008-07-21
  • 打赏
  • 举报
回复

<div>
<textarea id="TextArea1" cols="20" rows="20" onkeyup="check()"></textarea>
<label id="Label1"></label>
</div>
<script type="text/javascript">
function check()
{
var textLimit = 200;
var otextarea = document.getElementById("TextArea1");
var olabel = document.getElementById("Label1");
var textLength = otextarea.value.length;
if(textLength <= textLimit)
{
olabel.innerHTML = (textLimit - textLength) + "remains";
}
else
{
olabel.innerHTML = (textLength - textLimit) + "overflow"
}
}
</script>
lip009 2008-07-21
  • 打赏
  • 举报
回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 无标题文档 </title>

</head>

<body>
<textarea cols="60" rows="10" id="text1"></textarea><br>
剩余字符:<span id="textleft">20</span>
</body>
</html>
<script language="javascript">
var otext = document.getElementById("text1");
var otextleft = document.getElementById("textleft");
var re = /[^\x00-\xff]/g;
var maxLength = 20;
window.onload = function(){
if(document.all)
otext.onpropertychange = textleft;
else
otext.onkeypress = textleft;
}
function textleft()
{
var str = otext.value;
str = str.replace(re,"xx");//中文字符当2个字符处理 如果不用的话主是掉本行
otextleft.innerHTML = maxLength - str.length;
if((maxLength - str.length)<0){
otext.value=otext.value.substr(0,otext.value.length-1);
}
}
awusoft 2008-07-21
  • 打赏
  • 举报
回复
建议你在onKeydwon,onkeyup事件里写判断.onkeydown之前判断一下长度是否还可以输入,onkeyup之后更新一个区域,提示还有多少字符可以输入
sjkof 2008-07-21
  • 打赏
  • 举报
回复
最好还是用js在客户端实现
如果在服务端实现的话,动态提示需要不停的postback或callback
dsn21 2008-07-21
  • 打赏
  • 举报
回复
1. 两种方式,一种格式纯粹的客户端验证使用js 一把用js的正则表达式,来判断输入子字符的长度 甚至输入的是怎样的字符
2.是服务器端验证,当然可以把信息反馈给客户端的。。
youjianbo_han_87 2008-07-21
  • 打赏
  • 举报
回复
[Quote=引用 8 楼 zhangjg2124 的回复:]
用JS判断长度
[/Quote]
Michaelehome 2008-07-21
  • 打赏
  • 举报
回复
去掉了一些看不懂得,就好用了。


<html>
<head>
<script language="javascript">
var maxLength = 20;
function textleft()
{
var otext = document.getElementById("text1");
var otextleft = document.getElementById("textleft");
var str = otext.value;
otextleft.innerHTML = maxLength - str.length;
}
</script>
</head>
<body>
<textarea cols="60" rows="10" id="text1" onkeyup="textleft()"></textarea><br>
remain:<span id="textleft">20</span>
</body>
</html>
wj19266165 2008-07-21
  • 打赏
  • 举报
回复
<td>
<textarea name="bz" id="bz" style="width: 200px;" onkeyup="check(this);" onchange="check(this);" >
100字以内
</textarea>
</td>
<script type="text/javascript">
String.prototype.getLength = function(){
//得到字符串的真实长度
var l=this.length;
var n=l
for (var i=0;i<l;i++){
if (this.charCodeAt(i)<0||this.charCodeAt(i)>255)
n++
}
return n
}

function check(obj){
var max=obj.style.maxlength;
if(obj.value.getLength()>max){
alert("最多可输入"+max/2+"字,请重新输入!");
obj.focus();
obj.select();
}
}

</script>

w_j_w2008 2008-07-21
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 dsn21 的回复:]
1. 两种方式,一种格式纯粹的客户端验证使用js 一把用js的正则表达式,来判断输入子字符的长度 甚至输入的是怎样的字符
2.是服务器端验证,当然可以把信息反馈给客户端的。。
[/Quote]
是对的,建议用第一种,对控件的onkeypress编写事件判断,同事判断汉字等双字节问题。
cuilike 2008-07-21
  • 打赏
  • 举报
回复
[Quote=引用 9 楼 JerryBeckF 的回复:]
引用 8 楼 zhangjg2124 的回复:
用JS判断长度
[/Quote]
400个插件,下面的详细列表: mxp/ColdFusion中的Include mxp/80多个国家的一个下拉菜单,在某些时候的确挺方便的 mxp/检查当前文件的兼容性和可能包含的错误,并会给出详细的检测报告 mxp/在代码编辑框中选择一段脚本代码,然后使用这个插件,可以把这些代码放到一个单独的js文件中 mxp/在Dreamweaver中快速的插入一个Fireworks做好的图片,不过好象只能做空白图 :( mxp/这个插件用来代替Dreamweaver File菜单下的New Form Template命令。作用是可以侦测出站点内的模板,这样就直接打开了,而不象以前还需要在对话框中选择 mxp/在代码编辑环境下,插入一个脚本函数,函数名和参数都可以自定义的 mxp/这个插件很有意思,让你的窗口从大变小,或者从小变大 mxp/用来更新Configuration-TagAttributeList.txt这个文件 mxp/插入中文空格 mxp/Jet制作的飘浮图片插件,没时间封装,Redidea友情封装 mxp/Chromeless Windows标题bug修改版 mxp/使窗口过一段时间后自动关闭 mxp/用来做电子商务的插件。不过只停留在表面的html语句和form的action,没有涉及后台程序 mxp/替换Dreamweaver自带的show-hide layer behavior,从而使更好的支持Netscape 6 mxp/用来代替Dreamweaver自带的Set Text of Layer behavior,从而使得在Netscape 6下兼容 mxp/打开一个新窗口,并让窗口在屏幕上居中 mxp/Chromeless Windows,比我做的X-window好。 mxp/可以联合Authorware, CourseBuilder extension for Dreamweaver ,UltraDev, Macromedia Flash Learning Extensions, and Director等等的一系列软件做一个教学站点 mxp/对当前文件生成一个备份文件,以便修改 mxp/在site窗口的文件上点一下右键就出现这个插件了。作用是把文件复制或者移动到某个文件夹 mxp/层的转换特效,2.0版 mxp/加入JSP中的Include mxp/用表单外部的事件来提交表单 mxp/用表单外部的事件来控制表单的行为,包括提交,清空等等 mxp/可以对文本框中的内容做多种限制,比如不包含空格、引号等等 mxp/在Dreamweaver的File菜单下加一个Print code命令,用来打印代码 mxp/Splash Window,也叫chromeless splash , 一种效果很不错的浏览器窗口 mxp/在代码编辑窗的点右键,可以快速跳转到特定的代码行 mxp/在site窗口中的本地文件夹选择一个文件点右键,就可以打开当前文件所在的目录,很方便的 mxp/在代码编辑框中点右键就可使用。该插件可以让插件编写者用一些Windows风格的对话框来和用户进行交互 mxp/创建一个JustSo风格的相册 mxp/插件开发者使用,用来Debug mxp/Dreamweaver中的Menu.xml是记录Dreamweaver菜单信息的文件,由于某些原因,经常容易损坏,此插件可以创建备份文件并恢复 mxp/打开一个Web对话框窗口,也是很特别的一种,没有最大和最小化按钮 mxp/使一个多行的表格行和行之间颜色交替,像斑马线一样。2.0版本 mxp/可以倒出-倒入站点信息,方便其他开发者 mxp/插入e-Vue MPEG-4格式的文件 mxp/Mycomputer.com提供的一套Banner交换系统,使用起来需要注册,比较麻烦 mxp/MyComputer.com提供的一套站点访问跟踪系统,也是需要注册,使用麻烦 mxp/在页面中加入一个SiteMiner.com搜索引擎的接口,MyComputer.com提供 mxp/在页面中加入一个MyComputer.com提供的留言本,需要注册,使用麻烦 mxp/计算代码的字符个数 mxp/一个比Dreamweaver自带的Jump menu更好的下拉导航菜单 mxp/对Dreamweaver目录下的FtpExtensionsMap.txt文件进行编辑。此文件定义了某类型的文件以二进制或者文本方式ftp mxp/自动将窗口最大化 mxp/由MyComputer.com提供的一套投票程序,需要注册,使用烦琐 mxp/用来在Dreamweaver环境下编辑安装目录下的Extensions.txt文件,此文件记录的文件扩展名和文件类型的关系 mxp/加入一个指向邮件地址的连接,并可以自定

81,117

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧