网上很多方法,但都不可行,在判断换行符上,如果输入者按回车则可以分辨出换行,但是行输入满了后自动换行,却无法判断换行,试过控制每行字数30后加入换行符一个换行,但无法实现,,,,,我的代码如下: function textCounter(field, lines)
{
var arr = field.value.split("\n");
var perLine = "";
var value = "";
if (arr.length < lines)
lines = arr.length;
for (loop = 0; loop < lines; loop++)
{
perLine = arr[loop];
if(perLine.length>30)
{
value = value + perLine+ "\r\n";
}
else{
value=value+perLine;
} if (field.value != value)
field.value = value;
} }
{
var arr = field.value.split("\n");
var perLine = "";
var value = "";
if (arr.length < lines)
lines = arr.length;
for (loop = 0; loop < lines; loop++)
{
perLine = arr[loop];
if(perLine.length>30)
{
value = value + perLine+ "\r\n";
}
else{
value=value+perLine;
} if (field.value != value)
field.value = value;
} }
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择咨询单位</title>
<style type="text/css">
</style>
</head>
<body>
<div id='divCenter' class='divCenter' style="width:400px; height:400px; background-color:Blue;float:left; border:1px solid red;">
<iframe id="SendMsg" name="SendMsg" width="100%" height="100%" scrolling='auto' frameborder="0" src='about:blank'></iframe>
</div>
</body><script type="text/javascript">var IframeSendMsg;
window.onload=function()
{
var s=[];
s.push('<!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>');
if(document.frames && document.documentMode){s.push('<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>');}
s.push('<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">html,body{font-size:15px;padding:2px;margin:0px;background-color:#FFF;word-wrap:break-word;word-break:break-all;overflow:auto;');
if(document.frames)
{
s.push('height:auto;width:96%;');
}else{
s.push('height:95%;width:auto;');
}
s.push('} p{margin:0px;padding:0px;} img{border:0px;}</style></head><body></body></html>');
if(document.frames)
{
IframeSendMsg = document.frames('SendMsg');
IframeSendMsg.document.contentEditable='true';
}
else
{
IframeSendMsg =$('SendMsg').contentWindow;
}
IframeSendMsg.document.designMode = 'On';
IframeSendMsg.document.open();
IframeSendMsg.document.writeln(s.join(''));
IframeSendMsg.document.close();
IframeSendMsg.focus();
};
// 绑定事件 var $ = function (id,obj) {
return 'string' == typeof(id) ? (obj||document).getElementById(id) : id;
}; </script></html>
你现在HTML和CSS都没有,30是怎么个效果。你这么处理合不合适。这些都没法说。
TextMode="MultiLine" onkeydown="javacript:textCounter(this,5);" Rows="5"></asp:TextBox>
就只想这样,这个textbox里,可最大可输入五行,硬回车换行和行满后自动换行都算换行,是五行,五行,,,,,,
不明白 ,无法控制,,,,,,,,,
<textarea id="test" style="width:100px;height:80px;overflow-y:hidden">
一行
两行
三行
四行
五行
一行
两行
三行
四行
五行
</textarea>
再放一个隐藏的textarea,这个textarea的样式跟用来输入的样式相同,唯一区别是这个的visibility是hidden,并且刚好有五行字。当然,你可以根据自己的情况计算出五行的总可滚动高度,然后把这个隐藏框省略掉
<textarea id="test2" style="width:100px;height:80px;visibility:hidden">
一行
两行
三行
四行
五行
</textarea>
<script type="text/javascript">
var testObj=$("test");var testObj2=$("test2");
//判断输入文字的框的可滚动距离是否超过被隐藏的框的可滚动距离,如果超过了,说明输入已超过五行
alert(testObj.scrollHeight>testObj2.scrollHeight);
</script>
我给你判断了是/否,你还不会根据这个做进一步操作?
难道还是想全部copy现成的代码?还高度太微妙?
var s = $('textarea').val();
s = s.replace(/[a-z]{30}/gi, function(a) {return a + '<br/>'})); //如果发现一个单词的长度超过30个字符,则在中间加入"<br/>"
当然,这个方法还是会有问题,不过我觉得是个好的思路。
限制字数?保持页面友好?实际上,用户输入内容的复杂度可能超乎你的预计
全角半角中文,大小写英文,各类特殊符号,
要知道i和M是不一样长的
你也许要计算每个任何可能出现的字符所占的长度及其总长才行字数和行数总有冲突的时候
比如我输入300个i满5行
但是可能输入150个汉字就满5行了
就看你如何取舍了除非你严格限制用户只能输入长度一致的字符
否则目前没有完美的解决方案
一般都是用textarea,它有硬换行的功能,其他如果不行就用14#的正则替换行方式,虽然不能完美,但是也能尽可能做到一些兼容的考虑! 这是在FF下获取到的CSDN上的回复用到的输入口HTML:
<textarea style="height: 180px; width: 700px;" id="tb_ReplyBody___Editor" cols="20" rows="2" name="tb_ReplyBody$_$Editor" class=" CsdnUbbEditor"></textarea>
找到 CsdnUbbEditor这个样式名称,应该有对应的换行处理,另外加上正则替换处理,处理一些特殊情况。没必要所有都具备,能保证大众的普通需求就很不错了。
<!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=utf-8" />
<style>
textarea{border:#999 1px solid;width:100px;overflow:hidden;height:79px;line-height:15px;}
</style>
</head>
<body>
<textarea id="test" onkeyup="return check()" onchange="return check()">
</textarea>
<!--隐藏框(刚好五行字)-->
<!--<textarea id="test2" readonly="readonly">一行-->
<textarea id="test2" style="visibility:hidden">一行
两行
三行
四行
五行</textarea>
<input type="button" value="检测" onclick="check()"/>
<div id="result"></div>
</body>
</html>
<script type="text/javascript">
var inputText="";
var $=function(id){
return document.getElementById(id);
};
var check=function(){
var testObj=$("test");var testObj2=$("test2");
$("result").innerHTML=testObj.scrollHeight + "|" +testObj2.scrollHeight;
//判断输入文字的框的可滚动距离是否超过被隐藏的框的可滚动距离,如果超过了,说明输入已超过五行
if(testObj.scrollHeight>testObj2.scrollHeight){
//超过行数,直接把inputText变量存储的内容赋值进去,输入的新内容直接丢弃
testObj.value = inputText;
}else{
inputText = testObj.value;//没有超过行数,更新变量inputText为当前输入的内容
}
};
</script>直接存成一个html试一下