动态更改文本输入值答案

【问题标题】：Change text input values dynamically动态更改文本输入值
【发布时间】：2012-12-14 11:15:25
【问题描述】：

我的问题对你们来说可能很容易，但对我来说很难......

我有一个文本字段，我想在单击 <label id="some_id"> 后更改其值。直到我现在描述的，我可以自己用 jQuery 来做，但是这里是复杂的部分（显然对我来说）：

我有两个我想要用于该文本字段的值，一旦单击 <label>，它就会切换到未显示的值，但是一旦我们再次单击它，它就会消失回到文本字段包含的原始文本。

我必须保留我的 jQuery/JS 内部，因为我从数据库中获取所需的值，我不想让我的 .js 文件 .php。

这是我得到的：

<label for="html" onclick="$('#html').val('<?php echo $image->convert('html_b', $image_data['image_link']); ?>')">HTML:</label>
<input type="text" id="html" value="<?php echo $image->convert('html_a', $image_data['image_link']); ?>" readonly />

它完成了我需要的第一部分，将字段的值更改为新值，但是一旦再次单击该按钮，我想要原始文本。

谢谢。

【问题讨论】：

在用点击的标签覆盖值之前，将原始值保存在js变量中，第二次点击时再次使用原始值

标签： php javascript jquery input replace

【解决方案1】：

首先，不要使用内联 JavaScript。

您可以为此使用.toggle() 和data-* 属性的组合。例如，使用 data-toggle 属性作为您想要切换的值。

<label for="html" data-toggle="This is a placeholder">HTML:</label>
<input type="text" id="html" value="This is my real value" readonly>

$("label[for][data-toggle]").each(function() {
    var $this = $(this);
    var $for = $("#" + $this.attr("for"));
    var originalValue;
    $this.toggle(function() {
        originalValue = $for.val();
        $for.val($this.data("toggle"));
    }, function() {
        $for.val(originalValue);
    });
});

See it here.

更新 #1

我添加了<label> 的for 属性的用法。

更新 #2

如果由于弃用通知而不想使用.toggle()。

$("label[for][data-toggle]").each(function() {
    /* cache */
    var $this = $(this);
    var $for = $("#" + $this.attr("for"));
    var originalValue = $for.val();
    /* state variable */
    var which = 0;
    $this.click(function() {
        $for.val(which ? originalValue : $this.data("toggle"));
        which = 1 - which;
    });
});

See the non-.toggle() alternative here.

【讨论】：

toggle 方法已弃用。
@undefined，我在任何地方都看不到弃用说明。参考？
@undefined，我会带一个替代品

【解决方案2】：

您可以将其当前值与可用的可能性进行比较。

<label id="toggle" for="stuff">I'm a label</label>
<input type="text" val="" name="stuff" id="stuff">

var possibilities = ["foo", "bar"];

$('#toggle').click(function(){
    var old_val = $("#stuff").val(), new_val;
    if (old_val == possibilities[0])
        new_val = possibilities[1];
    else
        new_val = possibilities[0];

    $("#stuff").val(new_val);

});

demo

【讨论】：

【解决方案3】：

为此，在第一次单击按钮时，您需要将输入的当前值存储在某个变量中，然后在第二次单击时，您可以将该变量分配给输入值。如果你不想有js文件，你可以简单地使用<script></script>标签来编写jquery。

    `<label id="label" onclick="replaceText('newvalue')">Click Mee</label>
<input id="html" type="text" value="some value">

    <script>
        var currentValue="";
   function replaceText(newval){
       currentValue= $("#html").val();
        if(currentValue!=newval)
        $("#html").val(newval);
   $("#label").attr("onclick","replaceText('"+currentValue+"')");// Here we assigned the other value to label onclick function so that it will keep on toggling the content.
   }
    </script>`

DEMO HERE

【讨论】：

我做了一个非常简单的函数，它应该在每次点击时切换值:) 干杯！！

【解决方案4】：

您可以将值存储到 JavaScript 变量中，并使用 jQuery click 方法而不是 onclick 属性。

var def = "<?php echo $image->convert('html_a', $image_data['image_link']); ?>",
    up = "<?php echo $image->convert('html_b', $image_data['image_link']); ?>";

$('label[for=html]').click(function() {
    $('#html').val(function(i, currentValue) {
        return currentValue === def ? up : def;
    });
});

【讨论】：