Додайте текст до поля введення

108

Мені потрібно додати трохи тексту до поля введення ...

jquery text append

3

можливий дублікат Чи можна зробити ".value + =" в JQuery?

— Патрік МакЕлхані

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.

— Блакитна вівця

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";
});

— гнарф
джерело

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

— Маргус
джерело

Я не можу додати заповнювач до вікна пошуку, і я хотів би використовувати це, а потім очистити поле, коли користувач поставить курсор у поле пошуку. Це можливо?

— Кевін В.

5

Ви, ймовірно, шукаєте val ()

— kgiannakakis
джерело

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()повинен працювати на даних атрибута значення ? У будь-якому випадку я і ти мені, можливо, рано чи пізно це з’ясуємо.

Однак справа поки що:

Під час роботи з формами використовуйте дані .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>

Вихід

— Рам Пукар
джерело