Some research materials _javascript techniques about TEXTAREA's intuitive line-wrapping

Last Update:2017-01-18 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The first two days to study the textarea of the intuitive line of the line, very complex AH:

Intuitive line how to take not only to see the size of the cols, but also to see how the page encoding.
cols= "30" textarea, in fact, each row can hold 29 half-width characters, how many full-width characters are not necessarily, and the way the page encoding.
In the case of IE6.0, the line line of the lines occurs at the red Word (the red Word is folded to the next line).

DDDDDDDDDDDD meter ddddddddddddddddddddd//full angle after the continuous half of the content is treated as a complete word, if the remaining position can not accommodate the length of the word, it is necessary to change lines, this is a special law

Web pages in Unicode encoding ("Run Code" pop-up page that is encoded, JS generated pages are based on this encoding) when the general law is

("full" is said after no matter with the full angle, half-width characters, have to change lines)

123456789012345678901234567890//29 half the corner is full
1,358,024,679//17 Full Angle
2,469,134,979
2,469,128,679
2,469,129,679//16 Full angle, 1 half corner occupied
1,358,024,679
2,469,084,679//15 Full angle, 2 half angle, not full angle
11,358,024,679
12,469,094,679//15 Full angle, 2 half angle can be able to accommodate 1 half angle (more than 1 half angle according to special law a)
121,358,024,679//15 Full angle, 3 half corner occupied
122,469,104,679
1,231,358,024,679//14 Full angle, 4 half angle, not full angle
1,232,469,024,679//14 Full angle, 4 half angle can be able to accommodate 1 half angle (more than 1 half angle according to special law a)
12,341,358,024,679//14 Full angle, 5 half corner occupied
12,342,469,124,679
123,451,358,024,679//13 Full angle, 6 half angle, not full angle
123,452,471,024,679//13 Full angle, 6 half angle can accommodate 1 half angle (more than 1 half angle according to special law a)
1.,234,561,358,024,68e,+15//13 Full angle, 7 half corner occupied
1.,234,562,472,024,68e,+15
1.,234,567,135,802,47e,+16//12 Full angle, 8 half corner occupied
1.,234,567,251,802,47e,+16
1.,234,567,813,580,25e,+17//11 Full angle, 9 half angle, not full angle
1.,234,567,831,580,25e,+17//11 Full angle, 9 half angle can be able to accommodate 1 half angle (more than 1 half angle according to special law a)
1.,234,567,891,358,02e,+18//11 Full angle, 10 half corner occupied

......

13,579,694,679//15 Full angle, 1 half angle can be able to accommodate 2 half-width consecutive characters (more than 2 half-width according to the Special Law a), this article can be 15 full angle, 3 half of the angle of the full

......

1,235,358,024,679//14 Full angle, 1 half angle can be able to accommodate 4 half-width consecutive characters (more than 4 half-width according to the Special Law a), this article can be 14 full angle, 5 half of the angle of the full

......

134,658,024,679//14 Full angle, 2 half angle can be able to accommodate 3 half-width consecutive characters (more than 3 half-width according to the Special Law a), this article can be 14 full angle, 5 half of the angle of the full

......
The line-wrapping position is related not only to the entire line of text before the line-break position, but also to the red Word (often full-width text is folded to the next line because it cannot be squeezed at the end of the uplink).

In summary, there are:

Code:[copy to clipboard]x full angle, y half angle is full = x full angle, y-1 after half angle is not full angle = x whole angle, y-n half angle can be able to accommodate N half-width consecutive character (more than n half angle according to special law a).
So do the experiment to find out all the "full" situation is OK.

Now cols=30, the page is listed as "full" when Unicode encoding:

17 Full Angle
16 Full angle, 1 half angle
15 Full angle, 3 half angle
14 Full angle, 5 half angle
13 Full angle, 7 half angle
12 Full angle, 8 half angle
11 Full angle, 10 half angle
10 full angle, 12 half angle
9 Full angle, 13 half angle
8 full angle, 15 half angle
7 full angle, 17 half angle
6 full angle, 19 half angle
5 full angle, 21 half angle
4 full angle, 22 half angle
3 Full angle, 24 half angle
2 full angle, 26 half angle
1 full angle, 28 half angle
29 Half Angle

It is easy to measure all the "full" situations using the situation where a change is taking place according to a special rule:
For example, 1,.23,456,789,133,58e,+19//10 full angle, 12 half corner full
1.,234,567,891,243,58E,+20//Red Word in accordance with a special law a line, blue Word at 9 full angle, 13 half the corner of the full line

Cols=30, when the Web page is encoded by GB2312, the "fill" rule is different:

14 Full angle, 1 half angle
13 Full angle, 3 half angle
12 Full angle, 5 half angle
11 Full angle, 7 half angle
10 Full angle, 9 half angle
9 Full angle, 11 half angle
8 Full angle, 13 half angle
7 full angle, 15 half angle
6 full angle, 17 half angle
5 full angle, 19 half angle
4 full angle, 21 half angle
3 Full angle, 23 half angle
2 full angle, 25 half angle
1 full angle, 27 half angle
29 Half Angle

In this way, according to the coding of the Web page and cols, through the experiment to detect the "full" law.

Calculates the number of full-width and half-width characters from the beginning of the textarea content. According to the law of "fill" and the special rule A determines the position of the first visual line break, and then calculates the number of full-width and half-width characters from the second row (including physical and visual), according to the "full" Rules and special rules A determines the position of the second visual line-wrapping ... Keep going until the end of the textarea content. So you can get all the line-wrapping positions.

Of course, the actual application is not necessary and not possible to do this experiment, for example, select the textarea to line Y, not yet understand the official way, I do:

<textarea rows=5 cols=30 id=abc> grandfather heard that I would take my girlfriend to go fishing, also want to go to her. I took my girlfriend first, waiting for my grandfather, and I had caught a 18-kilogram perch. When my grandfather arrived, I introduced my girlfriend to him and raised the fish for him to see. how nice! He said, how to catch? With earthworms. I answered. That's odd, he said deliberately and solemnly, that my generation should at least have a meal and a movie! </textarea> <script language=jscript>/* Create by Bound0 on Blueidea mailto:bound0eureka@gmail.com * * function Sele (s,e) {var src = document.getElementById ("abc") var OTR = Src.createtextrange () var text=src.innertext v Ar textlength = text.length conts=[0]//* I didn't know the Getclientrects () method at first, I used this code to take textarea content to start in the approximate coordinates of the Web page, visible all roads lead to Roman obj=src fo R (Var sumtop=0,sumleft=0;obj!=window.document.body;sumtop+=obj.offsettop,sumleft+=obj.offsetleft, Obj= Obj.offsetparent); Startx=sumleft+6//textarea content begins in the approximate coordinates of the Web page starty=sumtop+9/startx=src.createtextrange (). Getclientrects () [0].left Starty=src.createtextrange (). Getclientrects () [0].top stepy=3//cursor Move down step, cannot be greater than word height in textarea//current scroll bar position The stepscr=30//scroll bar is scrolled down step size, not greater than the textarea height while (1) {SRC.SCROLLTOP=CURRENTSCR Currenty=staThe Rty while (1)//cursor moves down from the beginning of the textarea content, traverses the rows, and notes the line-break positions in conts[] {otr.movetopoint (startx, CurrentY) otr.moveend (" Character ", textlength) cont = Textlength-otr.text.length if (cont>=textlength) break if (cont>conts[conts.length -1] Conts[conts.length]=cont Currenty+=stepy} if (currentscr>=src.scrollheight) Break CURRENTSCR+=STEPSCR} if (e= = "") e=s S=parseint (s) e=parseint (e) if (Isfinite (s) &&isfinite (e) &&s>0&&e>0) {if (s> conts.length| | E>conts.length) {alert ("only +conts.length+" line in total.) ")/Check parameter validity return} if (E<s) {e=s;end.value=e}//If the end row is forced to adjust the parameter Src.scrolltop=0 otr.movetopoint (Startx,starty) before the start line The cursor returns to the beginning of the textarea content St=conts[s-1] Texprestart=text.substr (0,st). Replace (/\r/g, "")//from the beginning of the textarea content to the string before the start of the selection, Because the MoveStart method treats \ r \ n As a character, you need to fix the Count St=texprestart.length otr.movestart ("character", St) en=textlength if (e< conts.length) En=conts[e] Texpreend=text.substr (0,en). Replace (/\r/g, "")//from the beginning of the textarea content to the string before the select end point, because the MoveEnd method will \ r \ n as a character, need to be correctedNumber En=texpreend.length Otr.moveend ("character", En-st) Otr.select ()} </script> selected <input Name=start E=3> to <input name=end value=5> line <button onclick=sele (start.value,end.value) >select</button>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

The things written in the beginning of 04, should be the current study more comprehensive??

According to a website anonymously reproduced on the page (http://dl.pconline.com.cn/html_2/4/545/id=38457&pn=0.html) on the Netizen message, the above "JS implementation of the text field of any row selected" The sample code has a bug where running the sample code without the scroll bar at the top is an error. Now modified: Only one line of code has been added

CODE:
Src.scrolltop=0//Ensure that the scroll bar is at the top when the number of rows starts

<textarea rows=5 cols=30 id=abc> Bound0 Sub-Office Bioinformatics related business Introduction [multi-step biological information query] The complicated multi-step bioinformatics query is merged into one step to reduce the manual jump between the pages. As long as you can clear the Multi-Step biological information query process can be one step. [Bulk data transcription, integration] a large number of fragmented documents are included in the database or collated, translated into a format that meets the requirements. For example, the contents of hundreds of complex Word documents are included in the database. [Custom BOUND0 Eureka preselection database] The BOUND0 Eureka preselection database can be used to determine the composition of samples, to narrow down the scope of further experiments, to make adjustments to the next experimental link, or to preselection the best experimental program, thus shortening the research and development cycle, Save manpower and resources. It is also possible to preliminarily validate certain hypotheses and help to propose new hypotheses and construct new hypotheses. At the same time make the communication and teaching process easier and more convenient. The patent application for the core technology of the BOUND0 Eureka preselection database has been accepted, the patent application number: 200610077985.3. Custom Bound0 Eureka Preselection database (Bound0 Eureka preselector) Business essence: 1, custom Public database content localization integration. 2, custom database query method and query items. 3, custom analysis, statistical functions. 4, the custom data sharing function. 5, the custom teaching display function. 6, customization of other auxiliary functions. For example: The data content of the BOUND0 yeast protein Eureka Preselection database incorporates some of the data from the SGD database (Saccharomyces genome db, yeast Genome Library http://www.yeastgenome.org/). Contains a total of 6,713 protein information. Bound0 yeast protein Eureka preselection database has the following basic functions: (1) Eureka preselector (main function): According to the conditions to give a list of eligible proteins. The protein in the list is ranked according to the proximity of the characteristic of the protein to the target feature. Output and save Eureka results as Web pages. The results of the preservation are compared and analyzed. (2) The various biological information of the protein in the tree-like structure display (TreeView). (3) Provide comments and guidance on the standardized terms (go Term) that describe the descriptive features of proteins acting as cell components, participatory biological processes, and molecular functions, in the form of search engines. (4) In the form of a search engine, the proteinThe various IDs, names are simultaneous. (5) Implement a custom eureka://protocol on a computer that has a Bound0 yeast protein Eureka preselection database installed. You can use hyperlinks (text links, picture hotspot links, etc.) in the user's own web page to dynamically invoke the contents of the database to demonstrate. (6) Automatically generate the link code required for the above demo. (7) Independent distribution (easy to share data) of data analysis accessories, can be saved in the form of Web pages Eureka results of processing. For more information, please bound0@tom.com</textarea> <script language=jscript>/* Create by Bound0 on Blueidea mailto:bound0@t om.com/function Sele (s,e) {var src = document.getElementById ("abc") var OTR = Src.createtextrange () var text=src.i Nnertext var textlength = text.length Conts=[0]//* I didn't know the Getclientrects () method at first, I used this code to take the textarea content to start in the approximate coordinates of the Web page, visible all roads to Rome O Bj=src for (Var sumtop=0,sumleft=0;obj!=window.document.body;sumtop+=obj.offsettop,sumleft+=obj.offsetleft, Obj= Obj.offsetparent); Startx=sumleft+6//textarea content starts at the approximate coordinates of the Web page starty=sumtop+9/src.scrolltop=0//ensures that the scroll bar is at the top when the number of rows is started startx= Src.createtextrange (). Getclientrects () [0].left Starty=src.createtextrange (). Getclientrects () [0].top stepy=3// The step that the cursor moves down, cannot be greater than the word height in the textarea currentscr=0//Current scroll bar position stepscr=30//ScrollBar Scroll down step, not greater than textareaThe height while (1) {SRC.SCROLLTOP=CURRENTSCR currenty=starty while (1)//cursor moves down from the beginning of the textarea content, traverses the rows, and notes the various line-wrapping positions in conts[] { Otr.movetopoint (StartX, CurrentY) otr.moveend ("character", textlength) cont = Textlength-otr.text.length if (cont>= TextLength) Break if (Cont>conts[conts.length-1]) Conts[conts.length]=cont currenty+=stepy} if (currentScr>= src.scrollheight) Break Currentscr+=stepscr} if (e== "") e=s S=parseint (s) e=parseint (e) if (Isfinite (s) &&isfini Te (e) &&s>0&&e>0) {if (s>conts.length| | E>conts.length) {alert ("only +conts.length+" line in total.) ")/Check parameter validity return} if (E<s) {e=s;end.value=e}//If the end row is forced to adjust the parameter Src.scrolltop=0 otr.movetopoint (Startx,starty) before the start line The cursor returns to the beginning of the textarea content St=conts[s-1] Texprestart=text.substr (0,st). Replace (/\r/g, "")//from the beginning of the textarea content to the string before the start of the selection, Because the MoveStart method treats \ r \ n As a character, you need to fix the Count St=texprestart.length otr.movestart ("character", St) en=textlength if (e< conts.length) En=conts[e] Texpreend=text.substr (0,en). Replace (/\r/g, "")//self-teXtarea the beginning of the content to the string before the select end point, because the MoveEnd method treats \ r \ n As a character, you need to fix the Count En=texpreend.length otr.moveend ("character", En-st) otr.select ()} </script> select <input name=start value=3> line to <input name=end value=5> line <button Onclick=sele ( Start.value,end.value) >select</button>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Some research materials _javascript techniques about TEXTAREA's intuitive line-wrapping

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

Some research materials _javascript techniques about TEXTAREA's intuitive line-wrapping

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support