Wicket 6: TextField Cursor-Position bewegt sich, wenn Komponente aktualisiert

Question

Ich habe eine Komponente, die ein Wicket TextField umschließt, das ich bei der Aktualisierung über eine andere äußere Klasse, die für die Modellvalidierung zuständig ist, validiere.

Wenn der Inhalt ungültig ist, aktualisiere ich die Wrapper-Komponente, um einen Fehler anzuzeigen.

Dadurch wird das umschlossene TextField aktualisiert.

Das Problem ist, dass, wenn dieses Update der Cursor innerhalb des Textfeldes tritt 0.

von ‚update‘ zu positionieren, springen meine ich, dass ich die Textfield-Komponente am Hinzufügen (oder übergeordneten Container-Komponente/Panel) auf einem AjaxRequestTarget für die Aktualisierung.

Gibt es eine [nette] Möglichkeit, zu verhindern, dass dieser Cursor springt, und ihn einfach verlassen hat, wo er ist?

Answer 1

Sieht aus wie ich nicht hart genug suchen um hat - ich zu einer Lösung hier zeigen kann:

http://apache-wicket.1842946.n4.nabble.com/TextField-cursor-reset-mid-editing-td4668582.html

Insbesondere der Beitrag weiter unten durch:

ChambreNoire 4. Dezember 2014 ; 16:19 Uhr Re: FIXED: TextField Cursor zurückgesetzt Mitte Editier

Das funktionierte für mich nett, aber nur um zu bemerken, dass Sie eine Aktualisierung der Komponente nicht erzwingen sollten, wenn sich der Textinhalt des TextField-Modells nicht geändert hat, Andernfalls wird bei der Auswahl von Text über die Tastaturmethode (Umschalttaste + Pfeiltasten usw.) die Auswahl fehlschlagen und der Cursor wird auf die Position vor der Auswahl zurückgesetzt.

Eigentlich seit Forum-Beiträge eine Tendenz haben, hier zu verschwinden ist der Text der Post unter:

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