Question

我有一个允许用户更改按钮文本的UI。当他们单击编辑图标时，它会将按钮文本放入文本输入，然后可以对其进行编辑，然后保存。现在，这在Chrome中运行良好，但在IE11和Firefox中都不起作用，即使我停止传播事件也是如此。看起来事件永远不会成为IE11和Firefox中的文本输入。

<button type='button'>
<input type='text' id='mybutton' />
</button>

https://jsfiddle.net/s0duxn5f/

有没有人对如何在IE11和Firefox中使用它有任何建议？

Answer 1

您正在做的事情在HTML中无效。当您在按钮内声明任何内容时，它会覆盖其中的任何其他嵌入式控件。因此，您无法访问这些嵌套元素。如果您在单击按钮时尝试关注输入字段，则可以执行以下操作。

$("button").click(function(e) {
    $('#mybutton').focus();
});

示例：https://jsfiddle.net/DinoMyte/s0duxn5f/1/

对于原始问题，如果您想在点击按钮进行编辑时显示按钮文字，您将不得不尝试以下方式的黑客攻击：

 <button id="button" type='button'>Text
 </button>
 <script>    
$(document).ready(function(){
    $("#button").click(function(e) {
        if($(this).find('input').length == 0)
           $(this).append("<input type='text' id='mybutton'/>");    
        $('#mybutton').val($("#button").text());  
        $('#mybutton').focus();
    });

    $(document).click(function(e) {
      if(e.target.id != "")
         e.stopPropagation(); 
      else   
         $('#button').text($("#mybutton").val());     
    });
});
</script>

工作示例：https://jsfiddle.net/DinoMyte/s0duxn5f/3/

Answer 2

将<button>转换为<span>。

<span class='button'>
  <input type='text' id='mybutton' />
</span >

然后提供<span> CSS，使其外观和行为类似于按钮：

.button {
    cursor: pointer;
    // other css to make it look nice
}

然后添加一个click处理程序

$(".button").click(function(e) {
    // handle button
});
$("#mybutton").click(function(e) {
    // handle input
});

在IE和FF中输入按钮内部

2 个答案: