Introduction to some small functions in the Weibo input box-@ and # The cursor-based position in the pop-up box

It was a recent National Day and mid-autumn festival, so I did not share it immediately after I wrote it.

 

Let's talk about the idea:

This positioning feature is not perfect, but some people say it is difficult to control it. I provide an idea for reference only, which is intended for practical use. So it is best not to use it directly.

The reason is that the keypress control should be used first and the listening range is too small, and the focus and other events should be processed.
In addition, I only use English for this error. I need to use code to determine whether additional writing is required. (This is not suitable for writing during work. The shorter the writing time, the lower the risk)
I will mark a specific step as problematic.

Next let's talk aboutCode
First, you need to determine the position of the light indicator, write a range method, and let him return several numbers through passing Parameter Control. One is the position of the cursor, and the other is the starting position of the selection.
Next, obtain the string from the cursor position to the start, and determine the number of halfwidth and fullwidth characters. The halfwidth occupies 2 in the fullwidth. This controls the left of the DIV and determines whether there is a line break in it (determining the number is convenient for subsequent actions on the line height when del line breaks are used ), if you want to add a line height to the top, if the text is automatically wrapped, perform the remainder operation on the character to process the position of the character in each line.
The code is finally controlled by the @ currently typed. keycode is not used for processing because of the reason why the keyup low-level events are handled. If it is keypress, the processing method is different.

 /*  * Date: * blog: http://www.cnblogs.com/businessdiv/  */  // Num indicates the row height, and hnum indicates the maximum height.  Function  Order (Num, hnum ){  VaR TPAR = Document. getelementbyid ('txt' );  VaR Tchild = TPAR. getelementsbytagname ('textarea ') [0 ];  VaR Txtdiv = TPAR. getelementsbytagname ('div ') [0 ];  VaR Dwidth = parseint (txtdiv. style. Width, 10 );  VaR Cols =Tchild. Cols;  VaR Owidth = Tchild. clientwidth;  VaR Twidth = owidth/ Cols;  VaR Oleft = 0 ;  VaR Oval = "" ;  VaR Ocurr = 0 ; Tchild. onkeyup = Function  (E ){  VaR E = E | Event;  VaR T = E. srcelement | E.tar get;  VaR Kcode = E. keycode | E. charcode;  //  Get value          VaR Val = T. value;  //  Save current length          VaR Len = Val. length;  // Incoming Row Height          //  Calculate the cursor position to get the current insert position          VaR OTOP = Num;  VaR Olen = Range (t); lnum = 0 , Onum = 0 , Item = 0 ;  //  Obtain cursor position content          //  Obtains the characters inserted at the cursor.         VaR Lastcode = Val. charat (olen-1 ); Oval = Val. substring (0 , Olen );  //  Determine the number of matching Chinese and English characters          //  This step is lazy. there are errors related to Chinese Characters          VaR Req = oval. Match (/^ [\ x00-\ xFF] * $/ );  VaR L = Req. tostring (). length;  //  Get the number of Chinese characters at the cursor position         VaR OL = olen- L;  //  Control oleft          //  Gets the number of \ n typed through enter as one of the positioning control switches          For ( VaR I = Len; I -- ;){  //  Judge \ n              If (Val. charat (I) = "\ n" ){  //  Control Max                 If (OTOP < Hnum) {OTOP + = Num ;}  //  Run Once                  If (Item ++ = 0 ) {Onum = I ;}}}  //  ** In this step, the reason why onum is not accurate enough is that it is not used to handle the problem. Therefore, the calculated error is certain. Lnum = (L + ol/2-onum) % 40 * twidth; //  Control OTOP maxnum;         //  OTOP + = num          For ( VaR I = math. Floor (L + Ol * 2)/40); I --;){ If (OTOP < Hnum) {OTOP + = Num ;}}  //  Control cursor left          If (Lnum + dwidth)> Owidth) {oleft = Owidth-dwidth + Twidth ;} Else  {Oleft = Lnum + Twidth ;}  If (Lastcode = "@" ) {Txtdiv. style. Display = "Block" ; Txtdiv. style. Left = Oleft + "PX" ; Txtdiv. style. Top = OTOP + "PX" ;}}}  Function  Range (OBJ, curr ){  If ( Typeof (Obj. selectionstart) = "Number" ) {Start = OBJ. selectionstart; End = OBJ. selectionend;  //  Determine whether doucment. selection is supported } Else   If  (Document. Selection ){  VaR Range = Document. selection. createRange ();  If (Range. parentelement (). Id = OBJ. ID ){ VaR Range_all = Document. Body. createTextRange (); range_all.movetoelementtext (OBJ );  //  Range_all.compareendpoints () compares two endpoints              //  The control start is the same.              For (START = 0; range_all.compareendpoints ("starttostart", range) <0; Start ++ ) {Range_all.movestart ( 'Character ', 1 );}  //  Determine whether '\ n' exists in value & start ++             For ( VaR I = 0; I <= start; I ++ ){  If (Obj. value. charat (I) = '\ N' ) {Start ++ };}  VaR Range_all = Document. Body. createTextRange (); range_all.movetoelementtext (OBJ );  //  Same as above              For (END = 0; range_all.compareendpoints ('starttoend', range) <0; end ++) {Range_all.movestart ( 'Character ', 1 );}  For ( VaR I = 0; I <= end; I ++ ){  If (Obj. value. charat (I) = '\ N' ) {End ++ };}}}  If  (Curr ){  Return  [Start, end]} Else  {  Return  End} order ( 20,100)

 

The following is the HTML code. under normal circumstances, the pop-up box shows the Ajax data, which is not completely written here, and each keyup will return the Ajax character between @ and the cursor position to the pop-up box. Some local storage problems are also involved:

 <!  Doctype html  >  <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  >  <  Head >  <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"   />  <  Title  > TEMPLATE 1 </  Title  >  <  Style Type  = "Text/CSS"  >  # Txt  {  Width  :  500px  ;  Margin  :  10px auto  ; Position  :  Relative  ;  }  # TXT textarea  {  Height  :  100px  ;  Display :  Block  ;  Line-height  :  20px  ;  Overflow-y  :  Scroll  ;  } . Txtbox  {  Position  :  Absolute  ;  Width  :  50px  ;  Height  : 50px  ;  Background  :  # Ccc  ;  Left  :  0  ;  Top  : 0  ;  Display  :  None  ;  }  </  Style  >  </  Head  >  < Body  >      <  Div  ID  = "TXT"  >          <  Textarea  Name  = ""  ID  = ""  Cols  = "40"  Rows  = "10" > </  Textarea  >          <  Div  Class  = "Txtbox"  Style  = "Width: 50px ;"  >  1  </  Div  >      </  Div  >     <  Script  Type  = "Text/JavaScript"  SRC  = "Order. js"  > </  Script  >  </  Body  >  </  Html  >