javascript - 更改输入类型

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;
}

然后，如果您想将输入附加到页面上具有 id 'foo' 的元素:

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

如果您想从页面上的 div 开始，假设您在页面上有一个 ID 为 foo 的 div 标签:

<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);
}