Question

我正在尝试创建一个字段随时更改的表单。

从简单文本开始，当有人点击此文本时，它会转换为可编辑的文本输入字段。当有人点击它时，它会变回不可编辑的文本。

我试一试，但似乎没有正常工作。在前几次点击时工作正常，但随后它会丢失inputId并混合按钮。

这是html

<p id="firstElement" onclick="turnTextIntoInputField('firstElement');">First Element</p>
<p id="secondElement" onclick="turnTextIntoInputField('secondElement');">Second Element</p>

这是JavaScript（使用jQuery）。

我是JavaScript的新手，所以它可能不是最好的代码......

function turnTextIntoInputField(inputId) 
{  
    console.log(inputId);
    inputIdWithHash = "#"+inputId;
    elementValue = $(inputIdWithHash).text();
    $(inputIdWithHash).replaceWith('<input name="test" id="'+inputId+'" type="text" value="'+elementValue+'">');

    $(document).click(function(event) { 
        if(!$(event.target).closest(inputIdWithHash).length) {
            $(inputIdWithHash).replaceWith('<p id="'+inputId+'" onclick="turnTextIntoInputField(\''+inputId+'\')">'+elementValue+'</p>');
        }      

    });
}

以下是小提琴https://jsfiddle.net/7jz510hg/

的实例

我会感激任何帮助，因为它让我头疼......

Answer 1

首先，您不应该在html本身中使用onclick。

这是您可能采取的另一种方法：

＆＃13;

/**
  We're defining the event on the `body` element, 
  because we know the `body` is not going away.
  Second argument makes sure the callback only fires when 
  the `click` event happens only on elements marked as `data-editable`
*/
$('body').on('click', '[data-editable]', function(){
  
  var $el = $(this);
              
  var $input = $('<input/>').val( $el.text() );
  $el.replaceWith( $input );
  
  var save = function(){
    var $p = $('<p data-editable />').text( $input.val() );
    $input.replaceWith( $p );
  };
  
  /**
    We're defining the callback with `one`, because we know that
    the element will be gone just after that, and we don't want 
    any callbacks leftovers take memory. 
    Next time `p` turns into `input` this single callback 
    will be applied again.
  */
  $input.one('blur', save).focus();
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p data-editable>First Element</p>
  
<p data-editable>Second Element</p>
  
<p>Not editable</p>

＆＃13;

Answer 2

小提琴：https://jsfiddle.net/7jz510hg/1/

问题是没有用var定义inputIdWithHash和elementValue变量，它们变成了全局变量。

var inputIdWithHash
var elementValue

然后，由于它们具有全局范围，因此文档单击处理程序可以使用它们的旧值。您希望它们在turnTextIntoInputField函数中本地作用域。

更新维护值：https://jsfiddle.net/7jz510hg/2/

旁注，你正在使用jQuery 1.6，所以我不得不使用unbind函数而不是off。

更新了小提琴：https://jsfiddle.net/7jz510hg/3/

这使用最新的jquery，事件命名空间，因此我们可以将多个单击事件附加到文档，因此允许我们在字段之间单击而不会丢失任何内容。如果您直接点击字段而不是点击字段，点击文档，点击字段，那么之前的小提琴就会搞乱。

Answer 3

如果有人需要，我会将Jura的answer宏从JQuery移植到Vanilla JavaScript。同样，该参数也可以与p，h1，h2，span一起使用，无论如何：

a = df.number.to_numpy()
df['total'] = np.triu(a).sum(1)

print(df)

   index  number  total
0      0       5     18
1      1       7     13
2      2       3      6
3      3       1      3
4      4       2      2

相关：

JS equivalent for jQuery one()

Answer 4

尝试

$('#tbl').on('click','.editable',function() {

  var t = $(this);          
  var input = $('<input>').attr('class', 'savable').val( t.text() );
  t.replaceWith( input ); 
  input.focus();

});

$('#tbl').on('blur','.savable',function() {

  var input = $(this);      
  var t = $('<span>').attr('class', 'editable').text( input.val() );
  input.replaceWith( t ); 

});

http://jsfiddle.net/yp8bt6s0/

Answer 5

我建议不要将其复杂化。我使用简单的隐藏和显示方法将文本更改为输入字段。这很容易实现和理解。

 $('#editable').on('click',function(){
     var groupname = $("#editable").html();
     $("#editable").css({'display':"none"});
     $("#inputgroupname").css({'display':'block'});
     $("#inputgroupname").focus();
      $("#inputgroupname").val(groupname);
});

$("#inputgroupname").focusout(function(){
   $('#editable').html($("#inputgroupname").val());
  $("#inputgroupname").css({'display':'none'});
  $("#editable").css({'display':"block","margin-top":"2px"});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="box-title" style="margin-top:2px; margin-left:5px;" id="editable">Hello</h3>
 <input type="text"  id="inputgroupname" style="display:none;">

单击时将文本元素转换为输入字段类型文本，并在单击时将其更改回文本

5 个答案: