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

在窗体字段中控制焦点上的光标位置

1 个答案: