Regardless of whether any text is selected, the SelectionStart property represents the index into the text where you caret sits. So you can use String.Insert to inject some text, like this: myTextBox.Text = myTextBox.Text.Insert(myTextBox.SelectionStart, “Hello world”);
You can set the caret position using CaretIndex property of a TextBox. Please bear in mind that this is not a DependencyProperty. Nevertheless, you may still set it in XAML like this: <TextBox Text=”123″ CaretIndex=”{x:Static System:Int32.MaxValue}” /> Please remember to set CaretIndex after Text property or else it will not work. Thus it probably won’t … Read more
IE use different approach at setting cursor position than Firefox,Opera and Chrome. It’s better to make a helper function, which will do it for you. I use this one for own needs. function setCursor(node,pos){ node = (typeof node == “string” || node instanceof String) ? document.getElementById(node) : node; if(!node){ return false; }else if(node.createTextRange){ var textRange … Read more
Maybe I’m misreading the question, but wouldn’t the following do (assuming an editable <div> with id “editable”)? The timer is there because in Chrome, the native browser behaviour that selects the whole element seems to trigger after the focus event, thereby overriding the effect of the selection code unless postponed until after the focus event: … Read more
You can’t do this without some browser specific code, since they implement text select ranged slightly differently. However, there are plugins that abstract this away. For exactly what you’re after, there’s the jQuery Caret (jCaret) plugin. For your code to get the position you could do something like this: $(“#myTextInput”).bind(“keydown keypress mousemove”, function() { alert(“Current … Read more
Modified BojanG’s solution to work with jQuery. Tested in Chrome, FF, and IE. (function ($, undefined) { $.fn.getCursorPosition = function() { var el = $(this).get(0); var pos = 0; if(‘selectionStart’ in el) { pos = el.selectionStart; } else if(‘selection’ in document) { el.focus(); var Sel = document.selection.createRange(); var SelLength = document.selection.createRange().text.length; Sel.moveStart(‘character’, -el.value.length); pos = … Read more
Geowa4’s solution will work for a textarea, but not for a contenteditable element. This solution is for moving the caret to the end of a contenteditable element. It should work in all browsers which support contenteditable. function setEndOfContenteditable(contentEditableElement) { var range,selection; if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+ { range = document.createRange();//Create a range (a range … Read more
This solution works in all major browsers: saveSelection() is attached to the onmouseup and onkeyup events of the div and saves the selection to the variable savedRange. restoreSelection() is attached to the onfocus event of the div and reselects the selection saved in savedRange. This works perfectly unless you want the selection to be restored … 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