javascript 动态更改文本输入值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14082219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change text input values dynamically
提问by aborted
My question might be quite easy for you guys, but it's hard for me...
我的问题对你们来说可能很容易，但对我来说却很难......
I have a text field and I want to change its value between once <label id="some_id">is clicked. Until what I've described now, I can do it myself with jQuery, but here comes the complex part (for me, obviously):
我有一个文本字段，我想在<label id="some_id">单击一次之间更改其值。在我现在描述的内容之前，我可以使用 jQuery 自己完成，但复杂的部分来了（显然对我来说）：
I have two values I want for that text field, and once that <label>is clicked, it switches to the value that isn't shown, but once we click it again, it goes back to the original text the text field contained.
我有两个我想要的文本字段<label>的值，一旦单击它，它就会切换到未显示的值，但是一旦我们再次单击它，它就会返回到文本字段包含的原始文本。
I have to keep my jQuery/JS internal because I get the desired values from the database and I don't want to make my .jsfiles .php.
我必须保持我的 jQuery/JS 内部，因为我从数据库中获取所需的值，我不想让我的.js文件.php。
This is what I got:
这是我得到的：
<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 />
It does the first part I need, changing the value of the field to the new value, but once that button gets clicked again, I want the original text.
它完成了我需要的第一部分，将字段的值更改为新值，但是一旦再次单击该按钮，我想要原始文本。
Thank you.
谢谢你。
回答by Alexander
First, don't use inline JavaScript.
首先，不要使用内联 JavaScript。
You can use a combination of .toggle()and data-*attributes for this. For example, using a data-toggleattribute for the value you want to toggle with.
为此，您可以使用.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);
});
});?
UPDATE #1
更新 #1
I added usage of forattribute of <label>.
我添加for了<label>.
UPDATE #2
更新 #2
If you don't want to use .toggle()due to the deprecation notice.
如果.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;
});
});?
回答by Brigand
You can compare its current value to the available possibilities.
您可以将其当前值与可用的可能性进行比较。
<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
演示
回答by Ankush
For doing this, on the first button click you need to store the current value of input in some variable and then on 2nd click you can assign that variable to input value. If you donot want to have js file, you can simply use <script></script>tags to write the jquery.
为此，在第一次单击按钮时，您需要将输入的当前值存储在某个变量中，然后在第二次单击时，您可以将该变量分配给输入值。如果你不想有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>`
回答by undefined
You can store the values into JavaScript variables and use jQuery clickmethod instead of onclickattribute.
您可以将值存储到 JavaScript 变量中并使用 jQueryclick方法而不是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;
});
});
