Можно ли изменить значение <input type="text">, которое было скрыто со стилем display:none? У меня есть JS, который, кажется, работает, когда ввод <input type="hidden">, но не когда он скрыт с display:none. И AFAIK, вы не можете изменить тип входа с помощью JS.

По сути, я хочу заменить <input> на <select>, поэтому я пытаюсь скрыть его и добавить элемент <select>.


Взгляните на http://jsfiddle.net/5ZHbn/

Осмотрите элемент <select> с помощью firebug. Посмотрите на скрытый вход рядом с ним. Измените значение выбора. Скрытый ввод не меняется. Firebug лжет мне?

Если вы раскомментируете другие строки кода, это работает.

На самом деле ... Я уверен, что это ошибка в Firebug. Большинство других вещей корректно обновляются, но firebug не показывает обновленное значение, когда я его проверяю.

4
mpen 20 Авг 2010 в 03:29

6 ответов

Лучший ответ

Я думаю, что это ошибка Firebug.

Это потому, что если я запрашиваю (через консоль) значение поля ввода текста, оно фактически обновлено , просто Firebug не отражает обновленное значение в html-tab .

Фактически, при использовании dom-tab новое значение существует, даже если фактическое значение узла в html-tab не было обновлено.

Похоже, это происходит, если вы используете элемент "нормально видимый" (например, input type = "text") или аналогичный. Если вместо этого вы используете элемент «обычно скрытый» (например, тип ввода = «скрытый»), Firebug обычно обновляет его значение.

Я думаю, что это ошибка в Firebug, которая, по-видимому, не обновляет значение элемента, если он обычно виден, но теперь скрыт с помощью css: я говорю именно это, потому что вход с type = "hidden" и display: ни один не обновляется, тем не менее, это не просто проблема элементов, скрытых через display: none.

Надеюсь, это поможет, я собираюсь выпустить эту ошибку парням из Firebug.

ОБНОВЛЕНИЕ: я использую Firebug 1.8.4 на Firefox 8 на Win Srv 2K3.

7
njy 22 Апр 2015 в 15:36

Чтобы сделать изменения видимыми, вы можете установить значение с помощью SetAttribute

var inputs = document.querySelectorAll('input');
var select = document.querySelector('select'); 
select.onchange = function () {
  inputs[0].value = select.value;
  inputs[1].setAttribute('value', select.value);
  console.log('changed by input.value: ', inputs[0]);
  console.log('changed by input.setAttribute: ', inputs[1]);
};
<input type="text" style="display: none;" value="">
<input type="text" style="display: none;" value="">
<select>
  <option>Select value</option>
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
</select>
0
Serge 10 Ноя 2018 в 21:05

Один из вариантов, который у вас есть, - поместить поле ввода в div, а затем использовать javascript для изменения содержимого div. Например:

<html>
<head>
<title>Input Text To Dropdown Box</title>
<script type="text/javascript">
function swap() {
document.getElementById("contentswap").innerHTML = "<select><option value='cats'>Cats</option><option value='dogs'>Dogs</option></select>";
}
</script>
<style>
#contentswap {
display:inline;
}
</style>
</head>
<body
<div id="contentswap">
<input type="text" name="original">
</div>
<br />
<input type="button" value="Input To Select" onClick="swap()">
</body>
</html>
0
Building429 20 Авг 2010 в 01:53

У меня возникла эта проблема при настройке поля настраиваемой опции magento, я создал некоторые правила из некоторых входов произвольного выбора, и мне нужно было сохранить окончательное значение в скрытом текстовом поле настраиваемой опции. По какой-то причине, это не сработало, если поле было «display: none» (возможно, из-за js какого-то magento?), Но сработало, когда я переключился на «visibility: hidden;»

Я знаю, что мой ответ на конкретный, я пытался сделать комментарий, но мне не хватает репутации. Надеюсь, это поможет кому-то.

1
igrossiter 3 Мар 2014 в 23:59

Вы можете изменить его как обычно:

document.getElementById( 'myinput' ).value = 'Hello';
3
dionyziz 19 Авг 2010 в 23:32

Изменение значения поля должно работать должным образом, независимо от стиля CSS. Проблема, вероятно, в другом месте.

4
Matchu 19 Авг 2010 в 23:31