-> selectionStart <!doctype html> <html> <head> <meta charset = “utf-8”> <script type = “text/javascript”> window.addEventListener (“load”, function () { var input = document.getElementsByTagName (“input”); input[0].addEventListener (“keydown”, function () { alert (“Caret position: ” + this.selectionStart); // You can also set the caret: this.selectionStart = 2; }); }); </script> <title>Test</title> </head> <body> <input type = “text”> … Read more
^ only means “not the following” when inside and at the start of [], so [^…]. When it’s inside [] but not at the start, it means the actual ^ character. When it’s escaped (\^), it also means the actual ^ character. In all other cases it means start of the string / line (which … Read more
It’s a bitwise XOR (exclusive OR). It evaluates to True if and only if its arguments differ (one is True, the other is False). To demonstrate: >>> 0^0 0 >>> 1^1 0 >>> 1^0 1 >>> 0^1 1 To explain one of your own examples: >>> 8^3 11 Think about it this way: 1000 # … Read more
‘Caret’ is the word you are looking for. I do believe though, that it is part of the browsers design, and not within the grasp of css. However, here is an interesting write up on simulating a caret change using Javascript and CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 It seems a bit hacky to me, but probably the only … Read more
The following function will do it in all major browsers: function placeCaretAtEnd(el) { el.focus(); if (typeof window.getSelection != “undefined” && typeof document.createRange != “undefined”) { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != “undefined”) { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } } placeCaretAtEnd( … Read more
The following code assumes: There is always a single text node within the editable <div> and no other nodes The editable div does not have the CSS white-space property set to pre If you need a more general approach that will work content with nested elements, try this answer: https://stackoverflow.com/a/4812022/96100 Code: function getCaretPosition(editableDiv) { var … Read more
In most browsers, you need the Range and Selection objects. You specify each of the selection boundaries as a node and an offset within that node. For example, to set the caret to the fifth character of the second line of text, you’d do the following: function setCaret() { var el = document.getElementById(“editable”) var range … Read more
With Firefox, Safari (and other Gecko based browsers) you can easily use textarea.selectionStart, but for IE that doesn’t work, so you will have to do something like this: function getCaret(node) { if (node.selectionStart) { return node.selectionStart; } else if (!document.selection) { return 0; } var c = “\001”, sel = document.selection.createRange(), dul = sel.duplicate(), len … Read more