[Jquery plugin] insertcontent-insert and select content at the cursor position in the text box

Content inserted at the cursor position in the text box is often used in actual project applications. For example, to insert an expression in the text box, you must first obtain the position of the cursor in the text box. Of course, there is a browser compatibility problem.

In IE, you can use document. selection. createRange (); to obtain the cursor position,CodeIt is also very simple:

View Source

Print?

1	If (Document. Selection ){

2	Pos = Document. selection. createRange ();

3	POs. Text ="String to be inserted";

4

}

The Firefox browser is slightly responsible. You must first obtain the cursor position and then extract the value string.

View Source

Print?

1	If (Obj. selectionstart | obj. selectionstart ='0'){// Obj is a text box object.

2	VaR Startpos = obj. selectionstart;

3	VaR Endpos = obj. selectionend;

4	OBJ. value = obj. value. substring (0, startpos) +"String to be inserted" + Obj. value. substring (endpos, obj. value. Length );

5	OBJ. selectionstart = startpos + myvalue. length;

6	OBJ. selectionend = startpos + myvalue. length;

7

}Else {

8	OBJ. Value + ="String to be inserted";

9

}

You can view the javascript content inserted at the cursor position;

Now Weibo is very popular. We can try to insert a topic. When you click a topic, it will be inserted at the cursor position: # enter a custom topic here #. Note, the words "enter a custom topic here" are selected. You can directly tap the keyboard to edit the text.
In Firefox, it is relatively simple. You only need to insert a sentence in the above Code:
OBJ. setselectionrange (startpos-T, obj. selectionend + t );
T is the boundary value on both sides of the inserted text content based on the value. For example, 0 indicates that all the inserted text is selected, and-1 indicates that only one character is selected for each inserted text.
However, it is troublesome to use IE. You need to set the cursor position and select the text.

The complete code is as follows:

View Source

Print?

01

/**

02	* Created by Yuen wharf.

03	* User: Yuen Wharf

04	* Date: 11-5-19

05	* Time: AM

06	* More view http://www.css88.com/archives/3627

07

*/

08	// Insert content at the cursor position

09	(Function($ ){

10	$. FN. Extend ({

11	Insertcontent:Function(Myvalue, T ){

12	VaR $ T = $ (This) [0];

13	If (Document. Selection ){// IE

14	This. Focus ();

15	VaR Sel = Document. selection. createRange ();

16	Sel. Text = myvalue;

17	This. Focus ();

18	Sel. movestart ('Character',-L );

19	VaR Wee = SEL. Text. length;

20	If (Arguments. Length = 2 ){

21	VaR L = $ T. value. length;

22	Sel. moveend ("Character", Wee + t );

23	T <= 0? Sel. movestart ("Character", Wee-2 * t-myvalue. Length): SEL. movestart ("Character", Wee-T-myvalue. Length );

24

25	Sel. Select ();

26

}

27	}Else If ($ T. selectionstart | $ T. selectionstart ='0'){

28	VaR Startpos = $ T. selectionstart;

29	VaR Endpos = $ T. selectionend;

30	VaR Scrolltop = $ T. scrolltop;

31	$ T. value = $ T. value. substring (0, startpos) + myvalue + $ T. value. substring (endpos, $ T. value. Length );

32	This. Focus ();

33	$ T. selectionstart = startpos + myvalue. length;

34	$ T. selectionend = startpos + myvalue. length;

35	$ T. scrolltop = scrolltop;

36	If (Arguments. Length = 2 ){

37	$ T. setselectionrange (startpos-T, $ T. selectionend + t );

38	This. Focus ();

39

}

40

}

41

Else {

42	This. Value + = myvalue;

43	This. Focus ();

44

}

45

}

46

})

47	}) (Jquery );

Call method:

View Source

Print?

1	$ (Text field selector). insertcontent ("Inserted content");

2	$ (Text field selector). insertcontent ("Inserted content", Value );// Select the boundary between the two sides of the inserted text based on the Value

Demo address: http://www.css88.com/demo/insertContent/

Statement:This paper uses BY-NC-SA protocol for authorization | Web Front-end development
For more information, see [jquery plugin] insertcontent-insert and select content at the cursor position in the text box.