Jquery 将文本追加到输入字段_Jquery_Text_Append

Jquery 将文本追加到输入字段

jquery text

Jquery 将文本追加到输入字段,jquery,text,append,Jquery,Text,Append,我需要在输入字段中添加一些文本… $（“#输入字段id”）.val（$（“#输入字段id”）.val（）+“更多文本”）您可能正在寻找如果您计划不止一次使用附加功能，您可能需要编写一个函数： //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);

我需要在输入字段中添加一些文本…

$（“#输入字段id”）.val（$（“#输入字段id”）.val（）+“更多文本”）

您可能正在寻找
如果您计划不止一次使用附加功能，您可能需要编写一个函数：
//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');

有两种选择。Ayman的方法是最简单的，但我想补充一点。您应该真正缓存jQuery选择，没有理由调用$（“#输入字段id”）
两次：
var input = $( "#input-field-id" );
input.val( input.val() + "more text" );

另一个选项，也可以将函数作为参数。这具有易于处理多个输入的优点：
$( "input" ).val( function( index, val ) {
    return val + "more text";
});


//通过扩展JQuery定义appendVal
$.fn.appendVal=函数（TextToAppend）{
返回$（this.val）(
$（this.val（）+TextToAppend
);
};
//_____________________________________________
//这就是如何使用它：
$（“#SomeID”）
.appendVal（“此文本刚刚添加”）

当前节点文本

*{
字体系列：arial；
字体大小：15px；
}
更多信息


用户名：


发送数据
jQuery（文档）.ready（函数（$）{
$（“#更多”）。在（'click'，函数（x）{
var textMore=“用户名：

”；
$（“div”）.append（textMore）；
});
$（'btn_data'）。在（'click'，函数（x）上{
var users=$（“.users”）；
$（用户）。每个功能（即，e）{
log（$（e）.val（））；
});
})
});

输出
喜欢“其他选项”-很好的FP。注意，页面刷新或表单提交并返回页面时，当然每次都会添加相同的附加文本，因此最终会出现“更多文本”然后是“更多文本更多文本”等。请阅读我对这个问题的回答-真的没有理由调用$（“#输入字段id”）
两次。。。虽然答案很简单-+1我觉得应该有一个函数，可以像使用innerHTML一样添加输入值。我不能将占位符添加到搜索框中，我希望使用它，然后在用户将光标放入搜索框时清除该框。这是可行的吗？可能是重复的，这是否增加了一些新的东西来更好地回答这个问题？我知道你只是想延期，但这个问题已经回答了很长一段时间了。我只是想确保SO的质量得到维护。谢谢你的关心-我喜欢这样。但是你是对的，没有太多新的东西，本质保持不变。然而，当我消化当前的答案时，我觉得可以在风格和实现方面做一些工作。我首先检查了一些帖子是否可以编辑，但最后我认为最好是制作一个新的。那么最新消息是：*您可以运行被剪断的。*该扩展在编写自我记录代码的过程中起到了很大的作用，同时不会分散太多的注意力。
<!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>