小门6：更新组件时TextField光标位置移动

Question

我有一个包装Wicket TextField的组件，该组件在更新时会通过负责模型验证的其他外部类来验证其内容。

如果内容无效，我将更新包装器组件以显示错误。

这具有更新包装的TextField的效果。

问题是，发生此更新时，文本字段内的光标会跳到位置0。

“更新”是指我将TextField组件（或父容器组件/面板）添加到AjaxRequestTarget进行更新。

有没有什么[好的]方法可以防止此光标跳转发生并将其留在原处？

Answer 1

看起来我搜索的不够努力-我可以指出此处找到的解决方案：

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

具体来说，该职位进一步下降：

ChambreNoire 2014年12月4日； 下午4:19 Re：修正：TextField光标在编辑中重置

这对我很好，但是要注意，如果TextField模型的文本内容未更改，则不应该强制更新组件，否则，当您通过键盘方法（Shift +箭头键等）选择文本时，选择将失败，并且光标将返回到选择之前保持的位置。

实际上，由于论坛帖子有消失的趋势，因此以下是帖子的文本：

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