입력 필드의 값을 설정


답변:


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.