입력 필드의 값을 설정


답변:


819

이것은 한 가지 방법입니다.

document.getElementById("mytext").value = "My value";

6
사용자가 필드를 클릭하면 값을 NULL로 만드는 방법이 있습니까?
SebastianOpperman

4
예, 입력시 값을 지우는 이벤트 핸들러를 입력 필드에 지정하십시오. 예 : elem.onclick = clearField (); // 위의 답변과 비슷하게 값을 none으로 설정하여 필드를 지우는 함수를 가리 킵니다.
제임스

1
나를 위해 그것은 작동하지 않았다. 위의 값 속성이 작성됩니까?
Dchris

2
입력 태그 자체의 값을 변경하려고하면 작동하지 않는 것 같습니다. 명확히하기 위해 클릭 할 때 값을 변경 해야하는 버튼이 있으면 "this.parentNode.getElementByTagName ( 'input'). style.display = 'none으로도 변경할 수없는 것 같습니다. '; " 또는 this.style.display = 'none'; 또한 ".style = display : none; ';" 성공하지 않고 ...
MahNas92

7
위의 질문에 대한 이것과 다른 대답은 기본값 이 변경 된다는 것을 무시하는 것 같습니다 . 를 사용 .value = ...하면 현재 값만 변경됩니다. 양식을 재설정하면 ( <input type="reset" />예를 들어) 값이 원래 값으로 다시 변경됩니다. 반대로 setAttribute("value", ...)Firefox 및 Chrome에서 제대로 작동합니다. 기본값은 변경되지만 실제 값은 사용자가 아직 수정하지 않은 경우에만 변경됩니다. 그러나 setAttribute브라우저 호환성으로 인해 권장되지 않습니다. 다른 가능성이 있습니까?
JojOatXGME 2012 년

55

양식에 다음과 같은 입력 필드가 포함 된 경우

<input type='text' id='id1' />

다음과 같이 자바 스크립트로 코드를 작성하여 값을 다음과 같이 설정할 수 있습니다

document.getElementById('id1').value='text to be displayed' ; 

52

'setAttribute'함수를 사용합니다.

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
  document.getElementById("example").setAttribute('value','My default value');
</script>

19
value도트 표기법을 사용하여 직접 액세스해야합니다. developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute set / getAttribute 만 사용하여 원래 값을 처리합니다. DOM이로드 된 후 .value요소의 실제 작업 값을 나타냅니다.
Chris Baker

4
@ChrisBaker 가능한 경우이 답변을 +1000하겠습니다. 입력 필드를 스캔하여 응용 프로그램을 자동화하는 타사 응용 프로그램이 있습니다 (내 페이지는 내장 된 컨트롤에 렌더링됩니다). 클라이언트의 앱에서 입력 필드를 사용하는 고유 한 시나리오입니다. 문서 준비 기능에서 .value를 사용하여 포스트 백 직후 입력 필드가 재설정되지 않았습니다. 사용자가 시작하는 후속 비동기 포스트 백이 있었을 때,이 입력 값을 재사용하여 이전에 클릭 한 것을 자동화하고 페이지를 "잊어 버렸습니다". 이것은 내가 필요한 해키 마법 소스입니다. Pepe와 Chris에게 감사합니다!
MikeTeeVee

3
Yii 2.0을 사용하고 있으며 .value = ''를 직접 설정하면 필드에서 양식 유효성 검사가 올바르게 실행되지 않습니다. setAttribute ( 'value', '...') 사용이 올바르게 처리됩니다. 감사!
ekscrypto

로 해결 된 이상한 문제가 있습니다 setAttribute. 내 문제는 함수 호출을 통해 입력 값을 변경하고 마지막으로 변경된 입력도 변경하는 것이 었습니다.
SAMPro

이 답변 만 사용하여 팝업 모달 입력 (텍스트)으로 값을 설정할 수 있습니다. .value 가 작동하지 않았습니다. 감사합니다
Ula

19

이것들을 사용해보십시오.

document.getElementById("current").value = 12

// or

var current = document.getElementById("current");
current.value = 12

2
텍스트가 아닌 값을 이러한 필드에 설정하지 마십시오. 다시 읽어 보면 일부 브라우저에서 문자열 (!)을 읽을 수 있습니다.
socketpair

18

대답은 정말 간단합니다

// Your HTML text field

<input type="text" name="name" id="txt">

//Your javascript

<script type="text/javascript"> 
document.getElementById("txt").value = "My default value";
</script>

또는 JavaScript를 완전히 피하려면 HTML을 사용하여 정의 할 수 있습니다.

<input type="text" name="name" id="txt" value="My default value">

6
여기 오직 한 사람 value
만이이

@AlgyTaylor는 귀하의 노력에 감사하고 멋진 의견에 감사드립니다
php-coder

15

여러 양식을 사용하는 경우 다음을 사용할 수 있습니다.

<form name='myForm'>
    <input type='text' name='name' value=''>
</form>

<script type="text/javascript"> 
    document.forms['myForm']['name'].value = "New value";
</script>

3
이 답변이 마음에 드는 이유는 DOM 요소 ID가 아닌 양식의 "이름"속성을 사용하기 때문입니다. 왜 필요하지 않을 때 각 양식 입력에 ID 필드를 추가해야합니까?
tremor

@tremor는 전적으로 동의했으며 이것이 "id"가 아닌 "name"을 사용하여 찾은 첫 번째 답변입니다.
아보카도

8

자리 표시자를 얻는 가장 간단한 방법은 자리 표시 자 속성을 사용하는 것입니다.

<input type="text" name="text_box_1" placeholder="My Default Value" />

1
이것의 문제점은 Internet Explorer에서 전혀 작동하지 않는다는 것입니다. IE 클라이언트가 없다는 것을 알고 있다면 이것이 가장 좋은 대답입니다.
Sifu

2
@Sifu 필드를 비울 때 값을 다시 설정하기 때문에 IE 클라이언트 (JavaScript 솔루션뿐만 아니라) 있다는 것을 알고있는 경우에도 실제로 수행하는 것이 좋습니다 .
ahruss

1
@Sifu 때 IE가없는 자리 표시 자 속성을 지원 IE를 사용하고 www.1c3br3ak3r-multimedia.ca 및 검색 창에서보기로 이동 않았다, 그것은 자리 표시 자 속성을 사용
RWolfe

1
오래 전에 실제로하지 @Jdoonan 것을 - caniuse.com/#feat=input-placeholder의 자리는 IE10에서까지 지원
danwellman

6

간단 해; 예를 들면 다음과 같습니다.

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
var elem = document.getElementById("example"); // Get text field
elem.value = "My default value"; // Change field
</script>

4
document.getElementById("fieldId").value = "Value";

또는

document.forms['formId']['fieldId'].value = "Value";

또는

document.getElementById("fieldId").setAttribute('value','Value');

3
setAttribute ( '값', '값'); Chrome의 텍스트 상자에 표시 값을 설정하지 않습니다.
Curtis

1
<form>
  <input type="number"  id="inputid"  value="2000" />
</form>


<script>
var form_value = document.getElementById("inputid").value;
</script>    

기본값을 새 값으로 변경할 수도 있습니다

<script>
document.getElementById("inputid").value = 4000;     
</script>

1

HTML에서 사용하는이 부분

<input id="latitude" type="text" name="latitude"></p>

이것은 자바 스크립트입니다 :

<script>
document.getElementById("latitude").value=25;
</script>

0

시도해 볼 수도 있습니다 :

document.getElementById('theID').value = 'new value';

3
새 값을 설정해도 기본값이 설정 되지 않습니다 . 따라서 이렇게해도 문제가 해결되지 않습니다. 충분한 평판을 얻은 후에는 게시물의 의견으로 말해야합니다.
Daniel Cheung
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.