Home > Developer > JavaScript
I tried to find it online for 2 hours, but it was not compatible with FF. It seems that this kind of thing is not ready-made on the Internet. I can only do it myself.
Now released, there will be ready-made online for people to use.
In order to save trouble, it is also very convenient to use jquery to change the native JS in a few places. If you need it, Please modify it on your own.
You are welcome to pass by and leave a message to improve the code.
It is also compatible with the latest version of Chrome code.
Source code
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> js obtains the cursor position of the div editing box, textarea, and input text, and is compatible with FF and IE </title>
<Script src = "jquery-1.4.4.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
// Remove all spaces
String. prototype. trim = function (){
Return this. replace (/(^ \ s *) | (\ s * $)/g ,"");
}
Function getPosition (element ){
Var OsObject = "";
If (navigator. userAgent. indexOf ("MSIE")> 0 ){
OsObject = "MSIE ";
}
If (navigator. userAgent. indexOf ("Firefox")> 0 ){
OsObject = "Firefox ";
}
If (navigator. userAgent. indexOf ("Safari")> 0 ){
OsObject = "Safari ";
}
If (navigator. userAgent. indexOf ("Camino")> 0 ){
OsObject = "Camino ";
}
If (navigator. userAgent. indexOf ("Gecko")> 0 ){
OsObject = "Gecko ";
}
If (navigator. userAgent. indexOf ("Chrome")> 0 ){
OsObject = "Chrome ";
}
Var result = 0;
If (! Document. selection) {// non-IE browser
Var thisTagName = null;
If ($ (element). attr ("tagName ")! = "TEXTAREA" & $ (element). attr ("tagName ")! = "INPUT "){
If ($ (element). attr ("tagName") = "DIV" & $ (element). attr ("contenteditable") = "true "){
ThisTagName = window. getSelection (). anchorNode. parentElement. tagName;
} // From the http://www.cnblogs.com/ahjesus respect the author's hard work results, reprinted please indicate the source, thank you!
Else {
ThisTagName = null;
}
}
Else {
If ($ (element). attr ("tagName") = "INPUT" & $ (element). attr ("type") = "text "){
ThisTagName = window. getSelection (). anchorNode. tagName;
}
Else {
Console. log (window. getSelection ());
ThisTagName = window. getSelection (). anchorNode. tagName;
}
}
Console. log (thisTagName );
If (thisTagName = "TEXTAREA" | thisTagName = "INPUT" | (thisTagName = "BODY" & OsObject = "Chrome ")){
Result = element. selectionStart
} // From the http://www.cnblogs.com/ahjesus respect the author's hard work results, reprinted please indicate the source, thank you!
Else if (thisTagName! = Null ){
If (thisTagName = element. tagName ){
If (window. getSelection (). anchorNode. textContent ==$ (element). text ()){
Result = window. getSelection (). anchorOffset;
}
Else {
Var currentIndex = window. getSelection (). anchorOffset;
Var txt = "";
Var txtoo = window. getSelection (). anchorNode. previussibling;
While (txtoo! = Null ){
Txt + = txtoo. textContent;
Txtoo = txtoo. previussibling;
} // From the http://www.cnblogs.com/ahjesus respect the author's hard work results, reprinted please indicate the source, thank you!
Result = txt. trim (). length + currentIndex;
}
}
Else {
Var currentIndex = window. getSelection (). anchorOffset;
Var txt = "";
Var txtoo = window. getSelection (). anchorNode. parentElement. previousSibling;
While (txtoo! = Null ){
Txt + = txtoo. textContent;
Txtoo = txtoo. previussibling;
}
Result = txt. trim (). length + currentIndex;
}
} // From the http://www.cnblogs.com/ahjesus respect the author's hard work results, reprinted please indicate the source, thank you!
Else {
Return 0;
}
} Else {// IE
Var rng;
If ($ (element ). attr ("tagName") = "TEXTAREA" | ($ (element ). attr ("tagName") = "INPUT" & $ (element ). attr ("type") = "text") | ($ (element ). attr ("tagName") = "DIV" & $ (element ). attr ("contenteditable") = "true ")){
Element. focus ();
Rng = document. selection. createRange ();
Rng. moveStart ('character ',-element. innerText. length );
Var text = rng. text;
For (var I = 0; I <element. innerText. length; I ++ ){
If (element. innerText. substring (0, I + 1) = text. substring (text. length-I-1, text. length )){
Result = I + 1;
}
}
} // From the http://www.cnblogs.com/ahjesus respect the author's hard work results, reprinted please indicate the source, thank you!
Else {
Return 0;
}
}
Return result;
}
Function getValue (element ){
Var pos = getPosition (element );
Document. getElementById ("pnum"). value = pos;
}
</Script>
<Style type = "text/css">
# Div1, # Div2
{
Width: 500px;
Height: 100px;
Border: solid 1px black;
}
</Style>
</Head>
<Body>
<Input id = "pnum" type = "text" value = "Hello, wellcome to test! Hello, test! "Onmouseup =" getValue (this )"
Style = "display: block"/>
<Textarea cols = "60" rows = "10" onkeyup = "getValue (this)" onmouseup = "getValue (this)"> Hello, wellcome to test! Hello, test! Note that line breaks are not allowed between open and closed source code marks; otherwise, a statistical error occurs! </Textarea>
<Div id = "Div1" onclick = "getValue (this);" onkeyup = "getValue (this ); "contenteditable =" true "> One, Two, Three <span> four or five </span> six, seven, eight <span> nine zero </span> note that line breaks are not allowed between open and closed source code tags; otherwise, the statistics are incorrect! Note that other labels are nested in the source code of the div editing box. The correct position can be returned normally! </Div>
<Br/>
<Div id = "Div2" onclick = "getValue (this);" onkeyup = "getValue (this ); "> <span> </div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
