使文本框在单击时保持值。答案

【问题标题】：Make textbox hold value on click.使文本框在单击时保持值。
【发布时间】：2012-07-31 15:35:04
【问题描述】：

我正在尝试制作可编辑的文本。我所拥有的是您单击的一行文本，我需要一个文本框出现，允许用户更改文本的值。使用我拥有的代码，当您单击时，文本会消失。有任何想法吗？ 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();
        });

【问题讨论】：

你的意思是……文本框的默认行为？
是的，我需要它保存价值。
我不明白。一个文本框自己做这一切。如果它有一个值，你点击它，在你输入之前没有任何变化。
@Brad 我认为他的意思是将文本块转换为文本框。这意味着它应该看起来是静态的，然后单击显示文本框。有点像在评论上点击“编辑”
啊，有道理。 @DavidNuckols，如果这是您要问的，您可以编辑您的问题以便更清楚吗？特别是标题。

标签： javascript jquery html text input

【解决方案1】：

如果您使用现有的解决方案，也许会更简单。例如：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();
});

【讨论】：

我想限制第三方插件。

【解决方案2】：

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

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

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

【讨论】：

问题是它不具有该值。我需要它来保存编辑时的值。例如，如果您单击文本，我需要将文本保存在框中，以便您可以编辑值，例如，如果您需要将值从“Bob”更改为“Bob Smith”，您只需输入“Smith”而不是全部价值。
我刚刚测试过，也想出了这个
@DavidNuckols 是的，我理解这个问题。但是问题不在于文本框没有“保存值”，而是您的文本框正在被一个新的文本框替换，而这个新的文本框不包含任何文本。我将添加另一个示例...

【解决方案3】：

去掉$("#box1").val(inputValue).select();这一行。您已经在 html() 方法中设置了值。另外，在调试器中检查 inputValue 是否有值。

格雷厄姆指出的是，当你点击它时，它会变成

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

在外部 div 上仍有一个点击事件，因此当您再次点击它时，它会清除文本框。

【讨论】：

调试器有值。它工作正常，只需要在文本框中单击后保留文本输入框中的值即可。