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

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/