Изменить тип ввода

Question

Я работаю над довольно динамичным сайтом и хочу, чтобы пользователь мог выбирать, что он хочет ввести. Варианты ввода - это различные типы ввода (текст, пароль и т. Д.). Есть ли какой-нибудь стиль / способ создать это? Я думал, что они выбирают из выпадающего меню, а затем Javascript позаботится обо всем остальном. Но я думаю, что должен быть какой-то устоявшийся способ справиться с этим, которого я просто не нахожу в Интернете.

Спасибо за любую помощь.

Answer 1

В Javascript вы должны создать ввод следующим образом.

var input = document.createElement('input');
input.type = 'button';
...

Итак, если вы хотите создавать входные данные на лету, вы можете создать раскрывающийся список, в котором перечислены типы входных данных в виде строк (кнопка, текст и т. Д.). Затем, как только пользователь выберет строку в раскрывающемся списке, вы передадите ее в функцию Javascript, например:

function createInput(type) {
  var input = document.createElement('input');
  input.type = type
  ...
  return input;
}

Затем, если вы хотите добавить вход к элементу на странице с идентификатором 'foo':

var input = createInput('button');
var appendToThis = document.getElementById('foo');
appendToThis.appendChild(input);

Если вы хотите начать с div на странице, представьте, что у вас есть тег div с id foo на странице:

<div id=foo><input type=text></div>

Затем, когда пользователь выбирает элемент, очистите div и сделайте новый ввод:

function whenUserChoosesAType(type) {
  var div = document.getElementById('foo');
  rac(div);
  var input = document.createElement('input');
  div.appendChild(input);
}      

//abbreviated function to clear the contents of a DOM element such as a div
function rac(elem) {
  while(elem.hasChildNodes()) elem.removeChild(elem.firstChild);
}

Answer 2

Я изначально отвечал на ваши вопросы так:

<input type="text" id="changingInput">
<input type="button" value="Click Here For Example Of Changing" onclick="javascript:document.getElementById('changingInput').type = 'password';">

Но потом я проверил, и он не работал в IE ... или, конечно, (он прекрасно работает в Safari). Так что я нашел эту замечательную ссылку здесь:

http://www.universalwebservices.net/web-programming-resources/javascript/change-input-element-type-using-javascript

Надеюсь, это поможет!