Append text to input field

后端未结

关注

 6  1155

广开言路

I need to append some text to an input field...

相关标签:

6条回答

走了就别回头了

2020-11-28 05:46

    $('#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" />

0 讨论(0)

醉话见心

2020-11-28 05:50
There are two options. Ayman's approach is the most simple, but I would add one extra note to it. You should really cache jQuery selections, there is no reason to call $("#input-field-id") twice:
```
var input = $( "#input-field-id" );
input.val( input.val() + "more text" );
```
The other option, .val() can also take a function as an argument. This has the advantange of easily working on multiple inputs:
```
$( "input" ).val( function( index, val ) {
    return val + "more text";
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

太阳男子

2020-11-28 05:50

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

Well when creating this example I somehow got a little confused. "ValueText" vs >Current NodeText< Isn't .val() supposed to run on the data of the value attribute? Anyway I and you me may clear up this sooner or later.

However the point for now is:

When working with form data use .val().

When dealing with the mostly read only data in between the tag use .text() or .append() to append text.

0 讨论(0)

一整个雨季

2020-11-28 05:50

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

Output

0 讨论(0)

轻奢々

2020-11-28 06:10

If you are planning to use appending more then once, you might want to write a function:

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

After you can just call it:

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

0 讨论(0)

情深已故

2020-11-28 06:10

You are probably looking for val()

0 讨论(0)
发布评论:

提交评论
- 加载中...