将文本附加到输入字段
Posted
技术标签:
【中文标题】将文本附加到输入字段【英文标题】：Append text to input field 【发布时间】：2010-10-24 21:53:10 【问题描述】：我需要在输入字段中添加一些文本...
【问题讨论】：
Is it possible to do ".value +=" in JQuery?的可能重复 【参考方案1】： $('#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" />【讨论】：
请也阅读我对这个问题的回答 - 真的没有理由必须两次打电话给$('#input-field-id')...不过答案很简单 - +1
我觉得应该有一个函数可以像 innerhtml 一样增加输入值。【参考方案2】：
您可能正在寻找val()
【讨论】：
【参考方案3】：如果您打算多次使用附加功能，您可能需要编写一个函数：
//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);
之后你就可以调用它了：
jQ_append('my_input_id', 'add this text');
【讨论】：
我无法在搜索框中添加占位符，我想使用它，然后当用户将光标放在搜索框中时清除该框。这可行吗？【参考方案4】：有两种选择。 Ayman 的方法是最简单的，但我会在其中添加一个额外的注释。你真的应该缓存 jQuery 选择，没有理由调用 $("#input-field-id") 两次：
var input = $( "#input-field-id" );
input.val( input.val() + "more text" );
另一个选项.val() 也可以将函数作为参数。这具有轻松处理多个输入的优点：
$( "input" ).val( function( index, val )
return val + "more text";
);
【讨论】：
喜欢“其他选项”——FP 的好点子。 注意，页面刷新或表单提交并返回页面当然每次都会添加相同的附加文本，因此您最终会得到“更多文本”然后是“更多文本更多文本”等。跨度> 【参考方案5】： // 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>好吧，在创建这个示例时，我不知何故有点困惑。 "ValueText" vs >Current NodeText.val() 不应该在 value 属性的数据上运行吗？无论如何，我和你我迟早会解决这个问题。
但是现在的重点是：
使用表单数据时，请使用.val()。
在处理标签之间的大部分只读数据时，请使用 .text() 或 .append() 附加文本。 p>
【讨论】：
这是否增加了一些新的东西来更好地回答这个问题？我知道您只是在进行扩展，但这已经回答了很长一段时间。只是想确保 SO 的质量得到维护。 感谢您的关心 - 我喜欢这样。但是是的，你是对的，没有太多新的本质保持不变。然而，当我消化当前的答案时，我觉得在风格和实现方面可以做一些事情。我首先检查了一些帖子是否可以编辑，但最后我认为最好是制作一个新的。所以有什么新的：*您可以运行剪断。 * 该扩展在编写自文档代码的过程中大有帮助，同时又不会分散太多的本质。【参考方案6】：<!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>
输出
【讨论】：
以上是关于将文本附加到输入字段的主要内容，如果未能解决你的问题，请参考以下文章