Установите значение поля ввода

444

Как бы вы установили значение по умолчанию для <input>текстового поля формы в JavaScript?

SebastianOpperman
источник

Ответы:

820

Это один из способов сделать это:

document.getElementById("mytext").value = "My value";
Джеймс
источник
6
Я буду, есть ли способ сделать вейл NULL, если пользователь нажимает на поле?
Себастьян
4
Да, назначить обработчик событий для поля ввода, которое стирает значение по щелчку. Пример: elem.onclick = clearField (); // это указало бы на функцию, которая стирает поле, устанавливая значение в ничто, подобно ответу выше.
Джеймс
1
для меня это не сработало. Вышеуказанное создаст атрибут value?
Дхрис
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
55

если ваша форма содержит поле ввода, например

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

Затем вы можете написать код в JavaScript, как указано ниже, чтобы установить его значение как

document.getElementById('id1').value='text to be displayed' ; 
Varada
источник
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представляет фактическое рабочее значение элемента.
Крис Бейкер
4
@ChrisBaker Я бы +1000 этот ответ, если бы мог. У меня есть стороннее приложение, которое сканирует поля ввода для автоматизации приложения (моя страница отображается во встроенном, т.е. в Control). Это уникальный сценарий, в котором поля ввода используются клиентским приложением. Поля ввода не были сброшены сразу после обратной передачи с использованием .value в моей функции готовности документа. Когда у меня была последующая асинхронная обратная передача, которую инициировал пользователь, он снова использовал эти входные значения, чтобы автоматизировать то, на что они нажали ранее, и мне понадобилась страница, чтобы «забыть их». Это хакерский волшебный соус, который мне был нужен. Спасибо Пепе и Крису!
MikeTeeVee
3
Я использую Yii 2.0 и установка .value = '' напрямую не будет правильно выполнять проверку формы на поле. Использование setAttribute ('value', '...') правильно обрабатывается. Спасибо!
ekscrypto
У меня есть странная проблема, которая решена с setAttribute. Моя проблема состояла в том, чтобы изменить значение входа через вызов функции, изменить последние измененные входы тоже.
SAMPro
Я мог установить значение для всплывающего модального ввода (текст), только используя этот ответ. .value не работает для меня. Спасибо
Ула
19

Попробуйте это.

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

// or

var current = document.getElementById("current");
current.value = 12
dallinchase
источник
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">
PHP-верстальщик
источник
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. Зачем добавлять поле идентификатора к каждому входу формы, когда вам это не нужно?
тремор
@tremor полностью согласен, и это первый ответ, который я нашел, используя «имя», а не «идентификатор».
авокадо
8

Простой ответ не в Javascript, самый простой способ получить заполнитель через атрибут заполнителя

<input type="text" name="text_box_1" placeholder="My Default Value" />
RWolfe
источник
1
Проблема в том, что он вообще не работает для Internet Explorer. Если вы знаете, что у вас не будет клиентов IE, тогда да, это лучший ответ.
Сифу
2
@Sifu Это, вероятно , на самом деле хорошая вещь , чтобы сделать , даже если вы действительно знаете , у вас есть клиенты IE (возможно , в дополнение к решению JavaScript) , как это будет также повторно установить значение , когда поле опустошается.
ahruss
1
@ Sifu, когда IE не поддерживал атрибут placeholder, используйте IE и зайдите на www.1c3br3ak3r-multimedia.ca и посмотрите на панель поиска, он использует атрибут placeholder
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>
ultimatetechie
источник
4
document.getElementById("fieldId").value = "Value";

или

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

или

document.getElementById("fieldId").setAttribute('value','Value');
Арун Карнават
источник
3
SetAttribute ( 'значение', 'Значение'); не устанавливает видимое значение в текстовом поле для меня на Chrome.
Кертис
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>
Tobiloba
источник
1

Эта часть вы используете в HTML

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

Это javaScript:

<script>
document.getElementById("latitude").value=25;
</script>
Амранур Рахман
источник
0

Вы также можете попробовать:

document.getElementById('theID').value = 'new value';
Богдан Матес
источник
3
Установка нового значения не устанавливает значение по умолчанию. Следовательно, это не решает проблему. Вы должны сказать, что в качестве комментария к посту однажды вы наберете достаточно репутации.
Дэниел Ченг