以动态创建的形式设置输入类型将被忽略

Question

我点击一个按钮，调出一个带有动态创建表单的bootstrap-modal。我的问题是输入字段总是被视为文本，即使它们设置为select，readonly或number之类的东西。

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值，浏览器会忽略这些值input type="text" input's default type value。

截至此帖子，type元素的有效input值为：

• 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值。