HTML:分组输入字段

时间:2017-01-31 18:45:19

标签: html

我有许多带type="text"

的输入字段
<input type="text" id="...">
<input type="text" id="...">
<input type="text" id="...">
...
<input type="text" id="...">
<input type="text" id="...">
<input type="text" id="...">

我想阻止在每个输入上输入type="text"。有没有办法对这样的输入进行分组:

<inputgroup type="text">
   <input id="...">
   <input id="...">
   <input id="...">
</inputgroup>

该解决方案可以使用HTML,Javascript或其他任何内容进行编码。

4 个答案:

答案 0 :(得分:2)

您可以创建一个javascript函数,在div中动态注入输入标记

(function(){
var inject='';
for(var i=0;i<10;i++){
    inject+="<input type='text' value='"+i+"' id='id_"+i+"'/><br/>"
}
$('#inject').html(inject);

})();


<div id="inject">
//input tags will be injected here after function execution
</div>

演示:https://jsfiddle.net/abk0hvts/

答案 1 :(得分:1)

没有

有一种方法可以对输入进行分组:<fieldset><legend>,但这是根据要输入的内容对它们进行分组(例如,当您有多个字段组成时地址的不同部分。)

在HTML中,无法明确设置type属性。

也就是说,type="text"默认,因此您可以完全省略该属性(除非您出于其他原因(例如使用CSS属性选择器)依赖它)。 / p>

您也可以通过编程方式生成HTML(例如,使用模板语言)。

答案 2 :(得分:0)

您必须使用JavaScript / jQuery来实现您的目标。您正在寻找的是 DEMO

    <!--Group all your input fields within a 'div' and give this div a unique ID-->
    <div id="inputGroupText">
      <input id='a' />
      <input id='b' />
      <input id='c' />
    </div>

<script>
     $(document).ready(function(){
          //iterate through the div which groups all the 'input' fields
          $('#inpuGroupText').children('input').each(function () {
               // you can substitute 'text' with 'email', 'password' etc. depending on your need
               $(this).attr('type', 'text');
          });
     });
</script>

注意:如果您只是想避免写type='text',那么您可以忽略它,因为&#39; text&#39;是&#39; type&#39;的默认值属性,如果您没有为其指定值,浏览器会自动将输入字段视为type=text

答案 3 :(得分:-1)

相同的解决方案,但代码更具可读性:)

<script>
    $(document).ready(function () {
      var parent = document.getElementById('autobot');
      var tags = parent.getElementsByTagName('input');
      for (var i = 0; i < tags.length; i++) {
        tags[i].setAttribute('type', 'text');
      }
    });
</script>

<div id="autobot">        
    <input>
    <input>
    <input>
  </div>