输入框无法识别localStorage预填数据的技术求助

问题原因 #

这类类似Google地理定位API的搜索输入框，内部依赖用户输入事件（如input、change、键盘事件）触发地址解析、校验逻辑。直接通过searchBox.value赋值仅修改了DOM属性，不会触发这些内部监听的事件，因此输入框不认为该值是有效输入。

解决方案 #

方法1：触发标准输入事件（最通用）

直接触发input事件，绝大多数输入组件都会监听这个事件来处理输入内容：

if ('location' in localStorage) {
  const savedLocation = localStorage.getItem('location');
  searchBox.value = savedLocation;
  // 触发input事件，bubbles设为true确保事件能冒泡到组件内部监听
  searchBox.dispatchEvent(new Event('input', { bubbles: true }));
}

如果input事件无效，尝试触发change事件：

searchBox.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));

方法2：模拟真实键盘输入（适配严格校验的组件）

部分组件会校验输入来源，模拟逐个字符的键盘输入更贴近真实用户操作：

if ('location' in localStorage) {
  const savedLocation = localStorage.getItem('location');
  // 先清空输入框并触发一次input事件
  searchBox.value = '';
  searchBox.dispatchEvent(new Event('input'));

  // 逐个字符模拟键盘输入
  for (const char of savedLocation) {
    // 触发keydown、keyup、input事件
    searchBox.dispatchEvent(new KeyboardEvent('keydown', { key: char }));
    searchBox.value += char;
    searchBox.dispatchEvent(new KeyboardEvent('keyup', { key: char }));
    searchBox.dispatchEvent(new Event('input'));
  }

  // 最后触发blur事件，模拟用户输入完成后离开输入框
  searchBox.dispatchEvent(new Event('blur'));
}

方法3：检查组件暴露的API（若有）

部分第三方输入框会暴露全局API或实例方法用于设置值，比如Google Places Autocomplete提供了专门的地址设置方法。可以在控制台查看输入框关联的全局对象（如google.maps.places），尝试调用官方API：

// 示例：Google Places Autocomplete 设置地址
const autocomplete = new google.maps.places.Autocomplete(searchBox);
// 设置地址后触发解析
autocomplete.setPlace({ formatted_address: savedLocation });

测试建议 #

可以先在浏览器控制台手动测试事件触发，比如执行：

document.querySelector('#locationTextbox').dispatchEvent(new Event('input', { bubbles: true }))

观察输入框是否开始解析地址，以此判断哪种事件有效。

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