关于textarea的直观换行的一些研究材料

所属分类: 网络编程 / JavaScript 阅读数: 1467
收藏 0 赞 0 分享
前两天研究了一下textarea的直观行的换行规律,挺复杂啊:

直观行怎样取不光要看cols大小,还要看网页编码方式。
cols="30"的textarea,实际上每行可以容纳29个半角字符,多少个全角字符就不一定了,与网页编码方式有关。
在IE6.0实测的情况,直观行的换行发生在红字处(红字折到下一行)。

dddddddddddd米ddddddddddddddddddddd //全角后面的连续半角内容被当成一个完整单词处理,如果剩下的位置容不下单词的长度了,就要换行,此为特殊规律A

网页按Unicode编码(“运行代码”的弹出页面即按此编码,JS生成的页面均按此编码)时的一般规律是

(“占满”是说后面无论再跟全角、半角字符,都得换行)

123456789012345678901234567890 //29半角占满
一二三四五六七八九十一二三四五六七八九十 //17全角占满
一二三四五六七八九十一二三四五六七0八九十
一二三四五六七八九十一二三四五六0七八九十 
0一二三四五六七八九十一二三四五六1七八九十 //16全角,1半角占满
0一二三四五六七八九十一二三四五六七八九十
0一二三四五六七八九十一二三四五1六七八九十 //15全角,2半角后不可容全角
01一二三四五六七八九十一二三四五六七八九十
01一二三四五六七八九十一二三四五2六七八九十 //15全角,2半角后可再容1半角(多于1半角时按特殊规律A)
012一二三四五六七八九十一二三四五六七八九十 //15全角,3半角占满
012一二三四五六七八九十一二三四五3六七八九十
0123一二三四五六七八九十一二三四五六七八九十 //14全角,4半角后不可容全角
0123一二三四五六七八九十一二三四4五六七八九十 //14全角,4半角后可再容1半角(多于1半角时按特殊规律A)
01234一二三四五六七八九十一二三四五六七八九十 //14全角,5半角占满
01234一二三四五六七八九十一二三四5五六七八九十
012345一二三四五六七八九十一二三四五六七八九十 //13全角,6半角后不可容全角
012345一二三四五六七八九十一二三6四五六七八九十 //13全角,6半角后可容1半角(多于1半角时按特殊规律A)
0123456一二三四五六七八九十一二三四五六七八九十 //13全角,7半角占满
0123456一二三四五六七八九十一二三7四五六七八九十
01234567一二三四五六七八九十一二三四五六七八九十 //12全角,8半角占满
01234567一二三四五六七八九十一二8三四五六七八九十
012345678一二三四五六七八九十一二三四五六七八九十 //11全角,9半角后不可容全角
012345678一二三四五六七八九十一9二三四五六七八九十 //11全角,9半角后可再容1半角(多于1半角时按特殊规律A)
0123456789一二三四五六七八九十一二三四五六七八九十 //11全角,10半角占满

……

0一二三四五六七八九十一二三四五12六七八九十 //15全角,1半角后可再容2半角连续字符(多于2半角时按特殊规律A),此条可由15全角,3半角占满得出

……

0一二三四五六七八九十一二三四1234五六七八九十 //14全角,1半角后可再容4半角连续字符(多于4半角时按特殊规律A),此条可由14全角,5半角占满得出

……

01一二三四五六七八九十一二三四234五六七八九十 //14全角,2半角后可再容3半角连续字符(多于3半角时按特殊规律A),此条可由14全角,5半角占满得出

……
换行位置不仅与换行位置之前的整行文字有关,还与红字有关(往往全角文字是因为无法在上行末尾挤下才被折到下一行的)。

总结一下就有:


CODE:[Copy to clipboard]x全角,y半角占满 = x全角,y-1半角后不可容全角 = x全角,y-n半角后可再容n半角连续字符(多于n半角时按特殊规律A)。
所以做实验搞清楚所有“占满”的情形就可以了。

现将cols=30,网页按Unicode编码时的“占满”情况列出:

17全角
16全角,1半角
15全角,3半角
14全角,5半角
13全角,7半角
12全角,8半角
11全角,10半角
10全角,12半角
9全角,13半角
8全角,15半角
7全角,17半角
6全角,19半角
5全角,21半角
4全角,22半角
3全角,24半角
2全角,26半角
1全角,28半角
29半角

利用濒于发生按特殊规律A换行的情形,很容易测出所有“占满”的情形:
例如,一二三四五六七八九十012345678912一二三四五六七八九十 //10全角,12半角占满
一二三四五六七八九十0123456789123一二三四五六七八九十 //红字处按特殊规律A换行,蓝字处按9全角,13半角占满换行

cols=30,网页按GB2312编码时,“占满”规律不同了:

14全角,1半角
13全角,3半角
12全角,5半角
11全角,7半角
10全角,9半角
9全角,11半角
8全角,13半角
7全角,15半角
6全角,17半角
5全角,19半角
4全角,21半角
3全角,23半角
2全角,25半角
1全角,27半角
29半角

这样的话,要根据网页的编码方式和cols,通过实验具体才能测出“占满”规律。

从textarea内容的开头起计算全角和半角字符的数目,根据“占满”规律及特殊规律A决定第一个直观换行的位置,再从第二行(包括物理行和直观行)起计算全角和半角字符的数目,根据“占满”规律及特殊规律A决定第二个直观换行的位置……如是继续下去,直到textarea内容的末尾。这样就可以得到所有的换行位置了。

当然实际应用时没必要也没可能这样做实验啦,比如说选中textarea的第X行到第Y行,还没了解官方的办法是怎样的,我是这么办的:

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


04 年初写的东西,应该是目前研究比较全面的了吧??

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

根据被某网站匿名转载的页面( http://dl.pconline.com.cn/html_2/4/545/id=38457&pn=0.html )上的网友留言,上面的《JS实现文本域的任意行选定》示例代码有一处bug:即在滚动条不在顶端的情况下运行示例代码会出错。现已修正:只增加了一行代码


CODE:
src.scrollTop=0 //确保开始数行数时滚动条位于顶部

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多