jQuery .html()更新DOM但首个文本框屏幕不显示问题咨询

这种情况我之前排查过好几次，大概率是样式冲突、方法用错或者第三方组件的同步问题，给你几个具体的排查和解决方向：

• 先排查样式层面的问题
  打开浏览器开发者工具（按F12），选中第一个空白的文本框：

  • 检查它的display、visibility、opacity属性，有没有被设为none、hidden或者0，这些都会导致元素看不见但DOM还在
  • 对比文本框的color和background-color，是不是两者颜色完全一致？比如文字是白色，背景也是白色，看起来就是空白，但DOM里其实有内容
  • 看看有没有其他元素（比如一个透明的遮罩层、相邻的表单元素）的z-index比它高，把它完全挡住了

• 检查jQuery的设置方法是否正确
  不同类型的输入元素要用不同的jQuery方法：

  • 如果是原生的<input type="text">或者<textarea>，必须用$(selector).val('你的内容')来设置值，用.text()或者.html()只会更新DOM的文本节点，不会同步到input的value属性，自然界面不会显示
  • 如果是contenteditable="true"的div模拟输入框，才用.text()或者.html()来设置内容

  举个错误示例和修正版：

  // 错误：给input用text()，只会更新DOM文本，不会同步到value
  $('.director1 input').text('公司地址');
  // 正确：input用val()设置
  $('.director1 input').val('公司地址');
  

• 如果用了第三方UI组件（比如Bootstrap、自定义表单组件）
  很多UI框架会把原生input隐藏，用自定义的DOM元素模拟显示效果，这时候直接修改原生input的value，模拟的显示元素不会自动同步：

  • 可以尝试设置值之后触发change事件，让组件同步更新：$(selector).val('内容').trigger('change')
  • 去组件的文档里找专门的刷新方法，比如有些组件提供了refresh()或者update()方法来同步显示内容

• 最后检查有没有代码二次覆盖
  看看是不是你的设置代码执行后，还有其他脚本（比如页面加载完成的回调、定时器、其他事件监听）把第一个文本框的值又清空了？可以在设置值的地方加个console.log($(selector).val())，确认设置成功后，再看看后续有没有其他操作修改了这个值

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