Aggiungi testo al campo di input

108

Ho bisogno di aggiungere del testo a un campo di input ...

jquery text append

— Kevin Brown
fonte

3

possibile duplicato di È possibile fare ".value + =" in JQuery?

— Patrick McElhaney

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

Espandi lo snippet

— Ayman Hourieh
fonte

5

Si prega di leggere la mia risposta anche su questa domanda - Non c'è davvero alcun motivo per dover chiamare $('#input-field-id')due volte ... Risposta molto semplice però - +1

— gnarf

2

Penso che dovrebbe esserci una funzione che aggiunge valore a un input come puoi fare con innerHTML.

— Blue Sheep

109

Ci sono due possibilità. L'approccio di Ayman è il più semplice, ma aggiungerei una nota in più. Dovresti davvero memorizzare nella cache le selezioni di jQuery, non c'è motivo di chiamare $("#input-field-id")due volte:

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

L'altra opzione .val()può anche assumere una funzione come argomento. Questo ha il vantaggio di lavorare facilmente su più input:

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

— gnarf
fonte

2

Amare l '"altra opzione": un bel po' di FP.

— laher

17

Se hai intenzione di utilizzare l'aggiunta più di una volta, potresti voler scrivere una funzione:

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

Dopo puoi chiamarlo semplicemente:

jQ_append('my_input_id', 'add this text');

— Margus
fonte

Non riesco ad aggiungere un segnaposto a una casella di ricerca e vorrei usarlo e quindi deselezionare la casella quando l'utente inserisce il cursore nella casella di ricerca. È fattibile?

— Kevin W.

5

Probabilmente stai cercando val ()

— kgiannakakis
fonte

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>

Espandi lo snippet

Ebbene, durante la creazione di questo esempio mi sono in qualche modo confuso. " ValueText " vs> Current NodeText <Non .val()dovrebbe essere eseguito sui dati dell'attributo value ? Comunque io e tu potremmo chiarirlo prima o poi.

Tuttavia il punto per ora è:

Quando si lavora con i dati del modulo, utilizzare .val () .

Quando si ha a che fare con i dati per lo più di sola lettura tra i tag, utilizzare .text () o .append () per aggiungere testo.

— Nadu
fonte

1

Questo aggiunge qualcosa di nuovo per rispondere meglio alla domanda? Mi risulta che stai solo facendo un'estensione, ma questa risposta è stata risolta per un po 'di tempo. Voglio solo assicurarti che la qualità di SO sia rispettata.

— Kevin Brown

1

Grazie per l'attenzione, mi piace. Ma sì, hai ragione, non c'è molto di nuovo, l'essenza rimane la stessa. Tuttavia, quando ho digerito le risposte attuali, ho sentito che si poteva fare un po 'di cose sullo stile e sull'implementazione. Per prima cosa ho controllato se alcuni dei post potevano essere modificati, ma alla fine ho pensato che fosse meglio crearne uno nuovo. Allora, cosa c'è di nuovo: * Puoi eseguire lo snipped. * L'estensione aiuta molto a scrivere codice auto-documentante, senza distrarre troppo dall'essenza.

— 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>

Produzione

— Ram Pukar
fonte