在动态创建的表单中设置输入类型被忽略

Question

我正在单击一个按钮以调出一个引导模式，其中包含一个动态创建的表单。我的问题是输入字段始终被视为文本，即使它们设置为其他内容，例如选择、只读或数字。

Here you can see that the inputs have the right type-values, but the inputs are textfields anyway.

此处创建表单（console.log的输出如图）：

var data = "";

data += "<form name='altEditor-form' role='form'>";

for(var j = 0; j < columnDefs.length; j++){

  //Outputting input title and input.type 
  console.log(j + ": " + columnDefs[j].title + " - " + columnTypes[j].type)

  data += "<div class='form-group'><div class='col-sm-3 col-md-3 col-lg-3 text-right' style='padding-top:7px;'><label for='" + columnDefs[j].title + "'>" + columnDefs[j].title + ":</label></div><div class='col-sm-9 col-md-9 col-lg-9'><input type='" + columnTypes[j].type + "'  id='" + columnDefs[j].title + "' name='" + columnDefs[j].title + "' placeholder='" + columnDefs[j].title + "' style='overflow:hidden'  class='form-control  form-control-sm' value='" + adata.data()[0][newaData[j].name] + "'></div><div style='clear:both;'></div></div>";
}

data += "</form>";

如您所见，我将输入类型设置为：

<input type='" + columnTypes[j].type + "' ....

然后在此处将表单添加到模态：

$('#altEditor-modal').find('.modal-body').html(data);

我无法理解它。类型怎么可能被完全忽略？

Answer 1

您设置了无效的 type 值，浏览器将依次忽略将这些 inputs 视为 type="text":input's default type value。

截至本文为止，input 元素的有效 type 值为：

• button
• checkbox
• color
• date
• datetime
• datetime-local
• email
• file
• hidden
• image
• month
• number
• password
• radio
• range
• reset
• search
• submit
• tel
• text
• time
• url
• week

---

readonly 和 select 是无效的 type 值。