Встановіть значення поля введення


Відповіді:


819

Це один із способів:

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

6
Буду, чи є спосіб зробити vale NULL, якщо користувач натисне на поле?
SebastianOpperman

4
Так, призначте обробнику подій поле введення, яке стирає значення onclick. Приклад: elem.onclick = clearField (); // що вказувало б на функцію, яка стирає поле, встановлюючи значення нічого, подібно до відповіді вище.
Джеймс

1
для мене це не спрацювало. чи буде створене вище атрибут значення?
Дхріс

2
Схоже, це не спрацює, якщо ви намагаєтесь змінити значення для самого тегу input. Щоб уточнити, що якщо у мене є кнопка, яка повинна змінювати її значення при натисканні, я, здається, не зможу змінити її, ані "this.parentNode.getElementByTagName ('input"). Style.display =' none '; " ні з використанням цього.style.display = 'немає'; Також я навіть намагався використовувати ".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' ; 

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 не працював для мене. Дякую
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
Причина, що мені подобається у цій відповіді, полягає в тому, що ви використовуєте атрибут "name" форми, а не ідентифікатор елемента DOM, навіщо додати поле ідентифікатора до кожного з входів форми, коли цього не потрібно?
тремор

@tremor повністю погодився, і це перша відповідь, яку я знайшов, використовуючи "name", а не "id".
авокадо

8

Проста відповідь не в JavaScript, найпростіший спосіб отримати заповнювач - це атрибут власника місця

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

1
Проблема в тому, що він зовсім не працює для Internet Explorer. Якщо ви знаєте, що у вас не буде клієнтів IE, то так, це найкраща відповідь.
Сіфу

2
@Sifu Це, ймовірно , на насправді хороша річ , щоб зробити , навіть якщо ви дійсно знаєте , у вас є клієнти IE (можливо , в додаток до рішення JavaScript) , як це буде також повторно встановити значення , коли поле спустошується.
ahruss

1
@Sifu, коли IE не підтримував атрибут заповнювача, використовуйте 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>

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

або

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

або

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

3
setAttribute ('value', 'Value'); не встановлює видиме значення в текстовому полі для мене в 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>

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
Встановлення нового значення не встановлює значення за замовчуванням. Тому це не вирішує проблему. Ви повинні сказати, що як коментар до повідомлення, як тільки ви отримаєте достатню репутацію.
Даніель Чеунг
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.