Agregar texto al campo de entrada

Respuestas:

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

Ayman Hourieh
fuente
5
Por favor, lea también mi respuesta a esta pregunta: realmente no hay razón para tener que llamar $('#input-field-id')dos veces ... Sin embargo, una respuesta muy simple - +1
gnarf
2
Siento que debería haber una función que se agregue al valor de una entrada como se puede hacer con innerHTML.
Blue Sheep
109

Hay dos opciones. El enfoque de Ayman es el más simple, pero le agregaría una nota extra. Realmente debería almacenar en caché las selecciones de jQuery, no hay razón para llamar $("#input-field-id")dos veces:

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

La otra opción .val()también puede tomar una función como argumento. Esto tiene la ventaja de trabajar fácilmente en múltiples entradas:

$( "input" ).val( function( index, val ) {
    return val + "more text";
});
gnarf
fuente
2
Me encanta la 'otra opción': un poco de FP.
laher
17

Si planea usar la función de agregar más de una vez, es posible que desee escribir una función:

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

Después puedes simplemente llamarlo:

jQ_append('my_input_id', 'add this text');
Margus
fuente
No puedo agregar un marcador de posición a un cuadro de búsqueda y me gustaría usarlo y luego borrar el cuadro cuando el usuario coloca el cursor en el cuadro de búsqueda. ¿Es esto factible?
Kevin W.
5

Probablemente estés buscando val ()

kgiannakakis
fuente
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>
Expandir fragmento

Bueno, al crear este ejemplo, de alguna manera me confundí un poco. " ValueText " vs> Current NodeText <¿No se .val()supone que se ejecute en los datos del atributo de valor ? De todos modos, tú y yo podemos aclarar esto tarde o temprano.

Sin embargo, el punto por ahora es:

Cuando trabaje con datos de formulario, use .val () .

Cuando trabaje con los datos en su mayoría de solo lectura entre la etiqueta, use .text () o .append () para agregar texto.

Nadu
fuente
1
¿Agrega esto algo nuevo para responder mejor a la pregunta? Entiendo que solo está haciendo una extensión, pero esto ha sido respondido durante bastante tiempo. Solo quiero asegurarme de que se mantenga la calidad de SO.
Kevin Brown
1
Gracias por preocuparte, eso me gusta. Pero sí, tienes razón, no hay muchas novedades, la esencia sigue siendo la misma. Sin embargo, cuando digerir las respuestas actuales, sentí que se podía hacer un poco sobre el estilo y la implementación. Primero verifiqué si se podía editar parte de la publicación, pero al final pensé que era mejor hacer una nueva. Entonces, qué hay de nuevo: * Puede ejecutar el archivo snipped. * La extensión ayuda mucho en la forma de escribir código autodocumentado, sin distraer demasiado la esencia.
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>

Salida ingrese la descripción de la imagen aquí

Ram Pukar
fuente