入力フィールドにテキストを追加

108

入力フィールドにテキストを追加する必要があります...

jquery text append

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" />

スニペットを展開

— アイマン・ホーリー
ソース

5

この質問についても私の回答を読んでください$('#input-field-id')

— -2

2

のように入力の値に追加する関数があるべきだと思いますinnerHTML。

— Blue Sheep

109

2つのオプションがあります。アイマンのアプローチが最も単純ですが、もう1つ注意を加えます。jQueryの選択を実際にキャッシュする必要があります。2 $("#input-field-id")回呼び出す必要はありません。

var input = $( "#input-field-id" );
input.val( input.val() + "more text" );

他のオプションで.val()は、引数として関数を使用することもできます。これには、複数の入力を簡単に処理できるという利点があります。

$( "input" ).val( function( index, val ) {
    return val + "more text";
});

— ナルフ
ソース

2

「他のオプション」を愛する-FPのちょっとしたこと。

— laher、2009

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

— マーガス
ソース

検索ボックスにプレースホルダーを追加できません。これを使用し、ユーザーが検索ボックスにカーソルを置いたときにボックスをクリアします。これは可能ですか？

— Kevin W. 14

5

あなたはおそらくval（）を探しています

— キジャンナカキス
ソース

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()データで実行することは想定されていません属性のませんか？とにかく、私とあなたは私が遅かれ早かれこれを片付けるかもしれません。

ただし、現時点でのポイントは次のとおりです。

で作業する場合、フォームデータの使用.val（） 。

タグの間にあるほとんど読み取り専用のデータを処理する場合は、.text（）または.append（）を使用してテキストを追加します。

— ナドゥ
ソース

1

これにより、質問に適切に答えるために新しい何かが追加されますか？延長を行っているとのことですが、かなり長い間回答されてきました。SOの品質が維持されていることを確認したいだけです。

— ケビンブラウン

1

世話をありがとう-私はそれが好きです。しかし、はい、そうです。本質は同じで、それほど新しいものはありません。しかし、現在の回答を要約すると、スタイルと実装については少しのことしかできないと感じました。最初に一部の投稿が編集可能かどうかを確認しましたが、最終的には新しい投稿を作成するのが最善だと思いました。だから何が新しいのか：*あなたは切り取られて実行することができます。*エクステンションは、自己文書化するコードを書く方法の多くを助けますが、本質のあまり気を散らすことはありません。

— Nadu

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>

出力

— ラム・プカー
ソース