입력 필드에 텍스트 추가
답변:
$('#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" />
이 질문에 대한 제 답변도 읽어주세요-
—
gnarf 2011-09-23
$('#input-field-id')두 번 전화 할 이유가 없습니다 ... 아주 간단한 답변-+1
나는 당신이 할 수있는 것처럼 입력 값에 추가하는 함수가 있어야한다고 생각합니다
—
Blue Sheep
innerHTML.
두 가지 옵션이 있습니다. Ayman의 접근 방식이 가장 간단하지만 여기에 메모를 하나 더 추가하겠습니다. 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";
});
'다른 옵션'을 좋아하는-좋은 FP.
—
laher
추가를 한 번 더 사용할 계획이라면 함수를 작성하는 것이 좋습니다.
//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');
검색 상자에 자리 표시자를 추가 할 수 없으며 이것을 사용하고 사용자가 검색 상자에 커서를 놓을 때 상자를 지우고 싶습니다. 이것이 가능합니까?
—
Kevin W.
// 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 < value 속성 .val()의 데이터에서 실행 되지 않아야 합니까? 어쨌든 나와 당신은 조만간 이것을 정리할 수 있습니다.
그러나 지금의 요점은 다음과 같습니다.
작업 할 때 폼 데이터 사용 .val () .
태그 사이에 있는 대부분의 읽기 전용 데이터 를 처리 할 때 .text () 또는 .append () 를 사용하여 텍스트를 추가하십시오.
질문에 더 잘 답할 수있는 새로운 내용이 추가됩니까? 나는 당신이 단지 연장하고 있다는 것을 이해하지만 이것은 꽤 오랫동안 대답되었습니다. SO의 품질이 유지되는지 확인하고 싶습니다.
—
Kevin Brown
관심을 가져 주셔서 감사합니다. 그러나 네 맞습니다. 본질은 동일하게 유지되는 새로운 것이별로 없습니다. 그러나 현재 답변을 소화 할 때 스타일과 구현에 대해 약간의 작업이있을 수 있다고 느꼈습니다. 먼저 게시물의 일부를 편집 할 수 있는지 확인했지만 결국 새 게시물을 만드는 것이 가장 좋다고 생각했습니다. 그래서 새로운 것은 : * 당신은 snipped를 실행할 수 있습니다. * 확장 기능은 본질을 너무 많이 산만하게하지 않으면 서 자체 문서화 코드를 작성하는 데 많은 도움이됩니다.
—
Nadu
<!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>산출
