We Keep Coding

Wicket 6: TextField cursor position moves when component updated

I have a component that wraps a Wicket TextField that, upon update, I validate it's contents via some other outer class responsible for model validation.
If the contents is invalid I update the wrapper component to display an error.
This has the effect of updating the wrapped TextField.
The problem is that when this update occurs the cursor within the text field jumps to position 0.
By 'update' I mean that I am adding the TextField component (or parent container component/Panel) to an AjaxRequestTarget for update.
Is there any [nice] way to prevent this cursor jump from happening and have it just left where it is?

Looks like I didn't search around hard enough - I can point to a solution found here:
http://apache-wicket.1842946.n4.nabble.com/TextField-cursor-reset-mid-editing-td4668582.html
Specifically, the post further down by:
ChambreNoire Dec 04, 2014; 4:19pm Re: FIXED: TextField cursor reset mid-editing
This worked for me nicely, but just to note that you should not force an update of the component if the text contents of the TextField model hasn't changed, otherwise when you select text via keyboard method (shift+arrow keys, etc) then the selection will fail and the cursor will revert to the position held before the selection.
Actually, since forum posts have a tendency to disappear, here is the text of the post below:
OK so this is what I have. Disclaimer: I'm no javascript/jQuery expert so this is mostly cobbled together from things I have found online and tested in my particular situation. Any optimisations are more than welcome!
So first the script
(function($) {
$.fn.getCaretPosition = function() {
var input = this.get(0);
if (!input) return; // No (input) element found
if ('selectionStart' in input) {
// Standard-compliant browsers
return input.selectionStart;
} else if (document.selection) {
// IE
input.focus();
var sel = document.selection.createRange();
var selLen = document.selection.createRange().text.length;
sel.moveStart('character', -input.value.length);
return sel.text.length - selLen;
}
};
$.fn.setCaretPosition = function(position) {
var input = this.get(0);
if (!input) return false; // No (input) element found
input.value = input.value;
// ^ this is used to not only get "focus", but
// to make sure we don't have it everything -selected-
// (it causes an issue in chrome, and having it doesn't hurt any other browser)
if (input.createTextRange) {
var range = input.createTextRange();
range.move('character', position);
range.select();
return true;
} else {
// (input.selectionStart === 0 added for Firefox bug)
if (input.selectionStart || input.selectionStart === 0) {
input.focus();
input.setSelectionRange(position, position);
return true;
} else { // fail city, fortunately this never happens (as far as I've tested) :)
input.focus();
return false;
}
}
}
})(jQuery);
Then I add the following behavior to my TextField :
add(new AjaxFormComponentUpdatingBehavior("onkeyup") {
#Override
protected void onUpdate(AjaxRequestTarget target) {
String id = getComponent().getMarkupId();
String caret = id + "_caretPosition";
String selector = "$('#" + id + "')";
target.prependJavaScript("var $s = " + selector + ";if($s[0]===document.activeElement){" +
"jQuery.data(document,'" + caret + "'," + selector + ".getCaretPosition());}");
onFieldUpdate(getFormComponent(), target);
target.appendJavaScript("var $p = jQuery.data(document,'" + caret + "');" +
"if($p!=undefined){" + selector + ".setCaretPosition($p);" +
"jQuery.removeData(document,'" + caret + "');}");
}
#Override
protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
super.updateAjaxAttributes(attributes);
String id = getFormComponent().getMarkupId() + "_onkeyup";
attributes.setThrottlingSettings(new ThrottlingSettings(id, seconds(1), true));
}
});
So this gets round the 'zapping focus back to the original field after hitting tab' issue I experienced as the behavior will be called a bit after I hit tab due to the throttle settings but that won't affect whether the field is focused or not (it won't regain focus). So I can check this and bypass the whole thing if the field isn't focused simply by not storing the caret position and consequently not re-setting it.
You'll notice I'm storing the caretPosition in 'document' using jQuery.data(). There's probably a more 'js/jquery best practices' way to do this. I should also be clearing the position once I set it (thinking out loud) so I'll add that above.
CN

Prevent loss of highlight when clicking on other element

I'm working on a blog where I want a section to add a post. I'm imagining it very similar to the StackExchange editor I'm using right now to write this post.
I've managed to work with the textarea to get things like current caret position, insert at position, etc.
The problem I'm running into now is not losing the highlighted text in the textarea when the user clicks on another element, ie: the bold tool.
By default (at least in Chrome) when you highlight text in a textarea and then click elsewhere on the page, the textarea loses focus and the highlighted text with it.

When the textarea loses focus it will by default lose any previous selection, so at the onblur event you can save the current selection using the following function:
function getSelectedText() {
var txtarea = document.getElementById(textBoxScript);
var start = txtarea.selectionStart;
var finish = txtarea.selectionEnd;
var sel = txtarea.value.substring(start, finish);
return sel;
}
And to set it back on focus event you can use the following function:
function selectText(startPos, endPos, tarea) {
// Chrome / Firefox
if (typeof (tarea.selectionStart) != "undefined") {
tarea.focus();
tarea.selectionStart = startPos;
tarea.selectionEnd = endPos;
return true;
}
// IE
if (document.selection && document.selection.createRange) {
tarea.focus();
tarea.select();
var range = document.selection.createRange();
range.collapse(true);
range.moveEnd("character", endPos);
range.moveStart("character", startPos);
range.select();
return true;
}
}

Move caret position after focus() for ContentEditable <DIV>

I am trying to create a very basic rich-text editor in JavaScript but I'm having an issue with selections. So basically, since it's a contentEditable <div>, any time the user pastes in pre-formatted text from a webpage, the formatting doesn't get stripped off.
An easy to break hack is to give focus to a <textarea> upon Ctrl + V being pressed, so the text gets pasted in there, then onkeyup, give focus back to the <div>, copy the contents over and delete whatever went in to the <textarea>.
So that's easy, but when I give focus back to the contentEditable &;t;div>, the caret position is at the beginning and not immediately after the paste. I don't know enough about selections and whatnot to figure it out, so I'd appreciate some help. Here's my code:
// Helpers to keep track of the length of the thing we paste, the cursor position
// and a temporary random number so we can mark the position.
editor_stuff =
{
cursor_position: 0,
paste_length: 0,
temp_rand: 0,
}
// On key up (for the textarea).
document.getElementById("backup_editor").onkeyup = function()
{
var main_editor = document.getElementById("question_editor");
var backup_editor = document.getElementById("backup_editor");
var marker_position = main_editor.innerHTML.search(editor_stuff.temp_rand);
// Replace the "marker" with the .value of the <textarea>
main_editor.innerHTML = main_editor.innerHTML.replace(editor_stuff.temp_rand, backup_editor.value);
backup_editor.value = "";
main_editor.focus();
}
// On key down (for the contentEditable DIV).
document.getElementById("question_editor").onkeydown = function(event)
{
key = event;
// Grab control + V end handle paste so "plain text" is pasted and
// not formatted text. This is easy to break with Edit -> Paste or
// Right click -> Paste.
if
(
(key.keyCode == 86 || key.charCode == 86) && // "V".
(key.keyCode == 17 || key.charCode == 17 || key.ctrlKey) // "Ctrl"
)
{
// Create a random number marker at the place where we paste.
editor_stuff.temp_rand = Math.floor((Math.random() * 99999999));
document.getElementById("question_editor").textContent += editor_stuff.temp_rand;
document.getElementById("backup_editor").focus();
}
}
So my thinking is to store the cursor position (integer) in my helper array (editor_stuff.cursor_position).
N.B. I've been looking at other answers on SO all day and can't get any of them to work for me.

Here's a function that inserts text at the caret position:
Demo: http://jsfiddle.net/timdown/Yuft3/2/
Code:
function pasteTextAtCaret(text) {
var sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
// Preserve the selection
range = range.cloneRange();
range.setStartAfter(textNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().text = text;
}
}

Determine when caret reaches the end of input box

I have found this question which provides a solution to compute the exact position of the caret in a text or input box.
For my purposes, this is overkill. I only want to know when the caret is at the end of all the text of an input box. Is there an easy way to do that?

In all modern browsers:
//input refers to the text box
if(input.value.length == input.selectionEnd){
//Caret at end.
}
The selectionEnd property of an input element equals the highest selection index.

<script>
input = document.getElementById('yourinputfieldsid');
if(input.selectionEnd == input.selectionStart && input.value.length == input.selectionEnd){
//your stuff
}
</script>
This checks to see if the caret actually is at the end, and makes sure that it isn't only because of the selection that it shows an end value.

You don't specify what you want to happen when some text is selected, so in that case my code just checks whether the end of the selection is at the end of the input.
Here's a cross-browser function that wil work in IE < 9 (which other answers will not: IE only got selectionStart and selectionEnd in version 9).
Live demo: http://jsfiddle.net/vkCpH/1/
Code:
function isCaretAtTheEnd(el) {
var valueLength = el.value.length;
if (typeof el.selectionEnd == "number") {
// Modern browsers
return el.selectionEnd == valueLength;
} else if (document.selection) {
// IE < 9
var selRange = document.selection.createRange();
if (selRange && selRange.parentElement() == el) {
// Create a working TextRange that lives only in the input
var range = el.createTextRange();
range.moveToBookmark(selRange.getBookmark());
return range.moveEnd("character", valueLength) == 0;
}
}
return false;
}

How to know if the text in a textbox is selected?

I have text boxes <input type='text'> that only allow numeric characters and wont let the user enter a dot (.) more than once. Problem is, if the text in the text box is selected, the user intends to overwrite the contents with a dot, hence making it allowed! The question is, how can you tell in javascript whether the text in that text box is selected or not.
Thanks

The following will tell you whether or not all of the text is selected within a text input in all major browsers.
Example: http://www.jsfiddle.net/9Q23E/
Code:
function isTextSelected(input) {
if (typeof input.selectionStart == "number") {
return input.selectionStart == 0 && input.selectionEnd == input.value.length;
} else if (typeof document.selection != "undefined") {
input.focus();
return document.selection.createRange().text == input.value;
}
}

2017 Specific Answer - Faced the same issue recently.
We were allowing users to enter only 3 digits at a time. When the user tried to enter the fourth character we returned false.
This became an issue when the user had a selection and was trying to overwrite the values.
Taking a hint from Tim's answer. I understood that I wanted to see if the selection value was same as the input's value.
In modern browsers I achieved it by doing:
document.getSelection().toString() === input.value // edited
Hope this helps someone.

For anyone who needs the code to get at the selected text within a textbox, here's an enhanced version:
http://jsfiddle.net/9Q23E/527/
function getSelection(textbox)
{
var selectedText = null;
var activeElement = document.activeElement;
// all browsers (including IE9 and up), except IE before version 9
if(window.getSelection && activeElement &&
(activeElement.tagName.toLowerCase() == "textarea" || (activeElement.tagName.toLowerCase() == "input" && activeElement.type.toLowerCase() == "text")) &&
activeElement === textbox)
{
var startIndex = textbox.selectionStart;
var endIndex = textbox.selectionEnd;
if(endIndex - startIndex > 0)
{
var text = textbox.value;
selectedText = text.substring(textbox.selectionStart, textbox.selectionEnd);
}
}
else if (document.selection && document.selection.type == "Text" && document.selection.createRange) // All Internet Explorer
{
var range = document.selection.createRange();
selectedText = range.text;
}
return selectedText;
}

Instead of hitting the wall of digits dots and selections you can climb it easily by checking the value in onchange event.
HTML:
<input type="text" onchange="ValidateNumericValue(this);" />
JS:
function ValidateNumericValue(oInput) {
var blnRequired = true; //set to false if allowing empty value
var sValue = oInput.value;
if (blnRequired && sValue.length == 0) {
alert("Please enter a value");
oInput.focus();
return;
}
var numericValue = parseFloat(sValue);
if (isNaN(numericValue)) {
alert("Value is not a valid number");
oInput.focus();
return;
}
//put back to make 2.15A back to 2.15
oInput.value = numericValue + "";
}
This will check the value when changed (and user go to different element) and when not valid will alert and set focus back.
Live test case: http://jsfiddle.net/yahavbr/NFhay/

You can get the id of the selected element in the page with the following code:
elem_offset = document.getSelection().anchorOffset;
elem = document.getSelection().anchorNode.childNodes[elem_offset];
alert(elem.id);

If you're use case is simply to know whether any text is selected.
The difference between selectionStart and selectionEnd is always zero when no text is selected irrespective of cursor position.
So this should do the trick
const element = document.getElementById('inputbox');
const isTextSelected = element.selectionStart - element.selectionEnd;