如何得到文本框textarea可见区域显示的字符数？

qidianzy 2011-05-16 04:22:34

要求实现的功能：
有一个textarea文本框txtInfo，已设置成只读，去滚动条，行数是11，每行最多显示13个字符，自动换行。
这样一行最多显示143个字符。给txtInfo.value设置一段有 143 * n + m个字符的文本。这样将
文本赋给txtInfo时，就不能完全显示，得一页一页显示。
于是再添加一个图片按钮“下一页”btnNext，当点btnNext时，显示一页内容。

现在要解决的就是如何确定每一页显示的字符数，以使文本内容能正确显示出来。
主要遇到的问题是，textarea自动换行时，在行尾出现非汉字字符，像标点、英文单词时，
如果显示不完，就会自动换到下一，这样每行显示的字符数不确定。于是一页显示的字符数也就不好确定。
怎么做，才能正确得到每一页显示的字符数？

不一定非得像我说的那实现，只要点“下一页”按钮时，能正确显示文本就行。就是说能与上一页的文本衔接上。
也不一定非得用文本框，但只能用Html和Js来做。

还望高人指点！

在线等。。。

...全文

190 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

qidianzy 2011-05-16

打赏
举报

谢谢楼上赐教！晚些时候结贴。

囧 2011-05-16

打赏
举报



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

	<title>new document</title>

	<style type="text/css">

		html, body{

			font-size:12px;

		}

		#txtInfo{

			font-size:12px; width:156px; line-height:20px; height:220px; overflow:hidden; border:1px solid #ccc;

		}

		#page{

		    width:156px; text-align:center; line-height:30px;

		}

	</style>

	<script type="text/javascript">

		var page = 1, isEnd = false;

		function next(){

			!isEnd && show(++page);

		}

		function prev(){

			isEnd = false;

			page > 1 && show(--page);

		}

		function show(){

			var txt = document.getElementById("txtInfo");

			txt.scrollTop = (page - 1) * txt.offsetHeight;

			if(txt.scrollTop + txt.offsetHeight + 5 >= txt.scrollHeight){

				isEnd = true;

			}

		}

	</script>

</head>

<body>

	<div id="txtInfo">

		要求实现的功能：

		有一个textarea文本框txtInfo，已设置成只读，去滚动条，行数是11，每行最多显示13个字符，自动换行。

		这样一行最多显示143个字符。给txtInfo.value设置一段有 143 * n + m个字符的文本。这样将

		文本赋给txtInfo时，就不能完全显示，得一页一页显示。

		于是再添加一个图片按钮“下一页”btnNext，当点btnNext时，显示一页内容。



		现在要解决的就是如何确定每一页显示的字符数，以使文本内容能正确显示出来。

		主要遇到的问题是，textarea自动换行时，在行尾出现非汉字字符，像标点、英文单词时，

		如果显示不完，就会自动换到下一，这样每行显示的字符数不确定。 于是一页显示的字符数也就不好确定。

		怎么做，才能正确得到每一页显示的字符数？



		不一定非得像我说的那实现，只要点“下一页”按钮时，能正确显示文本就行。就是说能与上一页的文本衔接上。

		也不一定非得用文本框，但只能用Html和Js来做。



		还望高人指点！



		在线等。。。

	</div>

	<div id="page"><a href="javascript:prev();void(0)">上一页</a>  <a href="javascript:next();void(0)">下一页</a><div>

</body>

</html>