Добавить текст в поле ввода

Ответы:

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')дважды ... Хотя очень простой ответ - +1
gnarf
2
Я чувствую, что должна быть функция, которая увеличивает значение ввода, как вы можете с innerHTML.
Blue Sheep
109

Есть два варианта. Подход Аймана самый простой, но я бы добавил к нему одно дополнительное замечание. Вам действительно следует кэшировать выбор 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";
});
gnarf
источник
2
Любить «другой вариант» - приятный кусочек FP.
laher
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');
Маргус
источник
Я не могу добавить заполнитель в поле поиска и хотел бы использовать его, а затем очистить поле, когда пользователь помещает курсор в поле поиска. Это выполнимо?
Кевин В.
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> Current NodeText <Не .val()должен работать с данными атрибута value ? Во всяком случае, я и вы, возможно, рано или поздно это проясним.

Однако сейчас дело в следующем:

При работе с данными формы используйте .val () .

При работе с данными, в основном предназначенными только для чтения, между тегами используйте .text () или .append () для добавления текста.

Нада
источник
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>

Вывод введите описание изображения здесь

Рам Пукар
источник