Question

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

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

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

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

通过更新＆＃39;我的意思是我将TextField组件（或父容器组件/ Panel）添加到AjaxRequestTarget以进行更新。

是否有任何[漂亮]方法可以防止光标跳转发生并将其保留在原来的位置？

Answer 1

看起来我没有足够的搜索 - 我可以指出这里找到的解决方案：

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

具体来说，帖子进一步向下：

ChambreNoire 2014年12月4日;下午4:19 Re：FIXED：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

Wicket 6：当组件更新时，TextField光标位置移动

1 个答案: