jQuery实现类Excel单元格编辑，IE11动态文本框无法编辑无光标

嘿，我碰到过IE11这个老顽固的类似问题，咱们来一步步把它搞定！你的核心功能逻辑是对的，但IE11对动态DOM操作的细节要求更苛刻，咱们来调整几个关键地方：

问题根源分析 #

1. 动态input的创建方式：你用字符串拼接<input type='text' class='txt' value='" + old_value + "'>，如果单元格文本里包含单引号（比如O'Neil），会直接破坏HTML结构，导致IE无法正确识别input的value，甚至清空内容。
2. 焦点触发时机：IE11在DOM元素刚插入后，可能还没完成渲染就执行focus()和select()，导致焦点失效、光标消失。
3. 内容赋值的安全性：用html(txt)设置单元格内容，不仅有XSS风险，在IE里如果txt为空或有特殊字符，也会导致异常。

修改后的完整代码 #

HTML（调整jQuery版本到你使用的1.12.3） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
Click on any of the value, then you will be able to edit.
<br>
press RETURN key to move to and edit the next field.
<br><br>
<table>
 <tr>
  <td>First Name</td>
  <td class='question'>Ahmad</td>
 </tr>
 <tr>
  <td>Last Name</td>
  <td class='question'>Al-Mutawa</td>
 </tr>
 <tr>
  <td>Your Age</td>
  <td class='question'>22</td>
 </tr>
</table>

CSS（保持原样即可） #

table {
 border-collapse: collapse;
 font-family: arial;
 font-size: 12px;
 width: 350px;
}

td.question {
 border: 1px solid #ddd;
 font-weight: bold;
 width: 250px;
}

.txt {
 color: red;
 background-color: #def;
}

JavaScript（关键修改点标注） #

$('.question').click(function() {
 var $td = $(this);
 var old_value = $td.text().trim(); // 去除首尾空格，避免多余空白干扰

 // 1. 改用jQuery属性对象方式创建input，彻底避免字符串拼接的语法问题
 var $txt = $("<input>", {
  type: "text",
  class: "txt",
  val: old_value // 用jQuery的val方法赋值，安全兼容特殊字符
 });

 $td.empty().append($txt);

 // 2. 延迟触发焦点，给IE11足够的DOM渲染时间
 setTimeout(function() {
  $txt.focus();
  $txt.select();
 }, 10);
});

// 处理回车键事件
$(document).on('keyup', '.txt', function(e) {
 if (e.keyCode === 13) {
  var $txt = $(this);
  var $td = $txt.parent();
  var new_value = $txt.val().trim(); // 去除首尾空格，保持内容整洁

  // 3. 用text()代替html()，更安全且避免IE渲染异常
  $td.text(new_value);

  // 4. 增加边界判断，避免最后一行回车后触发无效操作
  var next_row = $td.parent().next();
  if (next_row.length > 0) {
   var next_question = next_row.find('.question').first();
   next_question.click();
  }
 }
});

关键修改说明 #

• 安全创建input：用jQuery属性对象方式生成input，彻底规避字符串拼接带来的语法错误，兼容所有特殊字符场景。
• 延迟焦点触发：给IE11加10ms的微小延迟，确保input完全渲染后再设置焦点和选中文本，解决光标消失的问题。
• 改用text()赋值：放弃html()改用text()设置单元格内容，既避免XSS风险，也解决IE对HTML内容的渲染异常。
• 边界处理：判断下一行是否存在，避免最后一行回车后触发无效的click事件，提升代码健壮性。

现在在IE11里测试，应该就能正常编辑、保持光标、回车后正确跳转啦！

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