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

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

希望这有帮助！

更改输入类型

2 个答案: