jQuery 将文本附加到输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/841722/
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
Append text to input field
提问by Kevin Brown
I need to append some text to an input field...
我需要在输入字段中附加一些文本...
回答by Ayman Hourieh
$('#input-field-id').val($('#input-field-id').val() + 'more text');<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="input-field-id" />回答by gnarf
There are two options. Ayman's approach is the most simple, but I would add one extra note to it. You should really cache jQuery selections, there is no reason to call $("#input-field-id")twice:
有两种选择。Ayman 的方法是最简单的，但我要补充一点。您应该真正缓存 jQuery 选择，没有理由调用$("#input-field-id")两次：
var input = $( "#input-field-id" );
input.val( input.val() + "more text" );
The other option, .val()can also take a function as an argument. This has the advantange of easily working on multiple inputs:
另一种选择，.val()也可以将函数作为参数。这具有轻松处理多个输入的优点：
$( "input" ).val( function( index, val ) {
return val + "more text";
});
回答by Margus
If you are planning to use appending more then once, you might want to write a function:
如果您打算多次使用附加，则可能需要编写一个函数：
//Append text to input element
function jQ_append(id_of_input, text){
var input_id = '#'+id_of_input;
$(input_id).val($(input_id).val() + text);
}
After you can just call it:
在你可以调用它之后：
jQ_append('my_input_id', 'add this text');
回答by Nadu
// Define appendVal by extending JQuery
$.fn.appendVal = function( TextToAppend ) {
return $(this).val(
$(this).val() + TextToAppend
);
};
//_____________________________________________
// And that's how to use it:
$('#SomeID')
.appendVal( 'This text was just added' )<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<textarea
id = "SomeID"
value = "ValueText"
type = "text"
>Current NodeText
</textarea>
</form>Well when creating this example I somehow got a little confused. "ValueText" vs >Current NodeText< Isn't .val()supposed to run on the data of the valueattribute? Anyway I and you me may clear up this sooner or later.
好吧，在创建这个例子时，我不知何故有点困惑。" ValueText" vs > Current NodeText< 不.val()应该在value属性的数据上运行吗？无论如何，我和你我迟早会解决这个问题。
However the point for now is:
然而，现在的重点是：
When working with form datause .val().
处理表单数据时使用.val()。
When dealing with the mostly read only datain between the tag use .text()or .append()to append text.
回答by Ram Pukar
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style type="text/css">
*{
font-family: arial;
font-size: 15px;
}
</style>
</head>
<body>
<button id="more">More</button><br/><br/>
<div>
User Name : <input type="text" class="users"/><br/><br/>
</div>
<button id="btn_data">Send Data</button>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#more').on('click',function(x){
var textMore = "User Name : <input type='text' class='users'/><br/><br/>";
$("div").append(textMore);
});
$('#btn_data').on('click',function(x){
var users=$(".users");
$(users).each(function(i, e) {
console.log($(e).val());
});
})
});
</script>
</body>
</html>
Output
输出
