将文字附加到输入栏

108

我需要在输入字段中附加一些文本...

jquery text append

— 凯文·布朗
source

3

— Patrick McElhaney 2015年

203

    $('#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" />

展开摘要

— 艾曼·霍里（Ayman Hourieh）
source

5

请同时阅读我对这个问题的回答-确实没有理由必须打$('#input-field-id')两次电话...虽然很简单-+1

— gnarf 2011年

2

我觉得应该有一个函数可以像的那样增加输入值innerHTML。

— Blue Sheep

109

有两种选择。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";
});

— 纳尔夫
source

2

喜欢“其他选项”-FP不错。

— laher 2011年

17

如果您打算使用附加更多然后添加一次，则可能需要编写一个函数：

//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');

— 玛格斯
source

我无法将占位符添加到搜索框中，而是想使用它，然后在用户将光标放在搜索框中时将其清除。这可行吗？

— 凯文W.

5

您可能正在寻找val（）

— 炸薯条
source

4

	// 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> 当前NodeText <是否不.val()应该在value属性的数据上运行？无论如何，我和你我迟早都会解决这个问题。

但是，目前的重点是：

使用表单数据时，请使用.val（）。

处理标记之间的大多数只读数据时，请使用.text（）或.append（）附加文本。

— 那都
source

1

这是否添加了新内容以更好地回答这个问题？我了解您只是在扩展，但是已经有一段时间了。只是想确保SO的质量得以维持。

— 凯文·布朗

1

感谢您的关心-我喜欢这样。但是，是的，您是对的，本质上并没有太多新的东西。但是，当我消化当前的答案时，我觉得关于样式和实现可能需要做一些工作。我首先检查了一些帖子是否可以编辑，但最后我认为最好再撰写一篇。那么，新功能是什么：*您可以运行该片段。*该扩展在编写自文档代码的方式上有很大帮助，同时又不会分散太多本质。

— 纳杜

0

<!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>

输出量

— 拉姆·普卡（Ram Pukar）
source