JS提交表单后如何修改光标位置（Django场景值丢失问题）

你遇到的值丢失问题核心是HTML标签写法错误：

• 你将JS函数调用直接写在了input标签的属性位置，直接删除了原本负责填充默认值的value属性，浏览器解析标签时无法识别输入框的预设值，自然会出现内容丢失。
• HTML标签内仅支持在on*开头的事件属性（如onfocus、onload）中编写可执行JS代码，直接在属性位写函数调用属于非法语法，不会被浏览器按JS逻辑执行。

1. 修正input标签写法 #

首先恢复value属性，给输入框添加唯一id方便JS定位，同时给模板变量加空值默认值，避免首次访问页面无form对象时渲染报错：

<form method="POST" action="search">
    {% csrf_token %}
    <input 
        id="searchInput"
        type="search" 
        name="search" 
        value="{{form.search.value|default:''}}" 
        placeholder="Search here..."  
        autofocus 
        x-webkit-speech
    />
</form>

2. 调整JS调用逻辑 #

你写的PosEnd光标定位函数本身逻辑没有问题，只需要把调用逻辑从标签属性中移到外部，改为页面DOM加载完成后自动执行即可：

<script>
function PosEnd(end) {
    var len = end.value.length;
    // 适配Webkit内核浏览器
    if (end.setSelectionRange) {
        end.focus();
        end.setSelectionRange(len, len);
    // 适配旧版IE浏览器
    } else if (end.createTextRange) {
        var t = end.createTextRange();
        t.collapse(true);
        t.moveEnd('character', len);
        t.moveStart('character', len);
        t.select();
    }
}

// 页面所有DOM元素加载完成后执行光标定位
document.addEventListener('DOMContentLoaded', function() {
    var searchInput = document.getElementById('searchInput');
    // 输入框存在且有填充值时才执行定位，避免空输入框不必要的聚焦
    if (searchInput && searchInput.value) {
        PosEnd(searchInput);
    }
});
</script>

实现说明 #

• 原有autofocus属性默认会把光标放在输入文本的最开头，上述JS逻辑会在页面加载完成后重新把光标定位到文本末尾，和autofocus行为不冲突。
• 加default:''模板过滤器后，首次访问index页面、没有提交表单的场景下，不会因为form对象不存在抛出模板渲染错误。

内容的提问来源于stack exchange，提问作者gks