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


Відповіді:


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.