使点击文本框保持值。

我正在尝试编辑文本。我拥有的是您点击的一行文本，我需要出现一个文本框，以允许用户更改文本的值。用我确实有的代码，当你点击文字消失。有任何想法吗？ HTML使点击文本框保持值。

 <div class="test">Click here</div>

jQuery的

 $(".test").click(function() { 
      var inputValue = $(".test").text(); 
      $(".test").html("<input value='"+inputValue+"' 
       type='text' id='box1'>"); 
      $("#box1").val(inputValue).select(); 
     });

来源

2012-07-31 David Nuckols

你的意思是...文本框的默认行为？ – Brad 2012-07-31 15:36:38

是的，我需要它持有的价值。 – 2012-07-31 15:38:17

我不明白。一个文本框自己完成。如果它有一个值，你点击它，没有改变，直到你输入。 – Brad 2012-07-31 15:38:42

也许这将是simplier如果您要使用现有的解决方案。例如：jeditable

但是如果你想（见DEMO）：

$(document).ready(function() { 
    var beginEdit = function() { 
     var text = $(this).text(); 
     var input = $('<input value="' + text + '" type="text">').one('blur', endEdit); 

     $(this).empty().append(input); 
    }; 

    var endEdit = function() { 
     var text = $(this).val(); 
     $(this).parent().html(text).one('click', beginEdit); 
    }; 

    $(".text").one('click', beginEdit); 
});

至于jQuery的插件（见DEMO2）：

$.fn.editable = function() { 
    this.each(function() {  
     var beginEdit = function() { 
      var text = $(this).text(); 
      var input = $('<input value="' + text + '" type="text">').one('blur', endEdit); 

      $(this).empty().append(input); 
     }; 

     var endEdit = function() { 
      var text = $(this).val(); 
      $(this).parent().html(text).one('click', beginEdit); 
     }; 

     $(this).one('click', beginEdit);   
    }); 
}; 

$(document).ready(function() { 
    $(".text").editable(); 
});

来源

2012-07-31 15:38:31

我想限制第三方插件。 – 2012-07-31 15:44:18

拿走线$("#box1").val(inputValue).select();。您已经在html()方法中设置了该值。另外，请在调试器中检查inputValue是否有值。

什么格雷厄姆指出的是，当你点击，当你再次点击它明确的文本框中会变成

<div class="test"><input value="Click here" type="text" id="box1"></div>

与click事件仍然在外层div如此。

来源

2012-07-31 15:44:47

调试器有一个值。它工作正常，只需要文本输入框中的值在文本框中单击后保留。 – 2012-07-31 15:52:14

这个jsFiddle有一个例子。当您单击一个段落时，jQuery事件处理程序会将段落中的HTML替换为包含段落文本的文本框。

当您单击新创建的文本框时，其中的文本消失。这是因为事件处理程序在您单击文本框时再次触发：段落（文本框）的HTML替换为包含段落文本的文本框。没有文字，所以现在你得到一个新的空文本框。

有几种方法可以阻止这种情况的发生。当您创建文本框时，您可以更改段落的类别，这意味着您的事件处理代码将不再触发。或者，您可以为文本框的单击事件设置另一个处理程序，并在此处调用stopPropagation函数。

来源

2012-07-31 15:46:37

问题是，它不具有该值。我需要它来保持编辑的价值。例如，如果您单击文本，我需要它将文本保留在框中以便您可以编辑值，例如，如果需要将值从“Bob”更改为“Bob Smith”，则只需键入“Smith”而不是整个价值。 – 2012-07-31 15:50:44

我刚刚测试过，也想出了这个 – 2012-07-31 15:50:47

@DavidNuckols是的，我明白这个问题。但问题不在于文本框没有“保存值”，发生的情况是您的文本框被新的文本框替换，并且此新的文本框不包含任何文本。我会再添加一个例子... – 2012-07-31 15:53:49

使点击文本框保持值。

回答

相关问题