javascript - 在 IE 和 FF 中的按钮内部输入

Question

我有一个用户界面，允许用户更改按钮上的文本。当他们单击编辑图标时，会将按钮文本放入文本输入中，他们可以在其中编辑它，然后保存。现在，这在 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/