在表单字段中控制光标位置

Question

我有一个包含 4 个字段的表单。我希望四个中的第一个拥有autofocus 并成为用户填写的第一个。但是，无论是通过制表符还是鼠标或其他方式，当用户到达第二个字段时，我希望光标结束在要开始的字符串的末尾。该字段中有一个预填充的字符串。

我正在使用 Django，所以我有一个控制属性的表单小部件。我可以让字符串显示，甚至让光标到最后，但这总是会导致autofocus 以及第二个字段。我没有设法得到两者。

这是我目前使用的代码：

Django

field = forms.URLField(
    widget = forms.URLInput(
        attrs = {
            'placeholder': 'enter field',
             # call to javascript function - this works
            'onfocus': 'add_string("field_id", "string")',
        } 
    )
)

JavaScript：

// add string to element
function add_string(id, string) {
    var input = document.getElementById(id);
    input.value = string;
}

我玩过各种 JS 脚本，但无济于事。然后我找到了setSelectionRange 并像这样玩弄这个：

input.setSelectionRange(7, 7)

其中 7 将是 onfocus JavaScript 函数调用中特定“字符串”的结尾，但我无法让它工作......

最后，我玩弄了一些看起来像这样的 jQuery：

// focus after string, no highlight
$(document).ready(function() {
    var $field = $("#field_id");
    var old_val = $field.val();
    $field.focus().val('').val(old_val);
});

但这做了同样的事情：将初始焦点带到第二个字段并将光标带到末尾。

知道我该如何做到这一点，在字段一上同时获取autofocus，但让光标跳转到字段二的预填充字符串的末尾以成为焦点？如果我知道怎么做，这可能是一个不错的技巧。

Answer 1

您就快到了，您只需要在表单域获得焦点时触发代码，而不是在文档就绪时触发。在我的测试中，有必要添加一个零超时，否则字段值将保持选中状态：

$(document).ready(function() {
    var $field = $("#field_id");
    $field.on('focus', function() {
        setTimeout(function() {
            var old_val = $field.val();
            $field.val('').val(old_val);
        }, 0);
    });
});

JSFiddle demo