为什么在将类型更改为type="number"时，我的输入不会调整大小，但它适用于type="text"？
Email: <input type="text" name="email" size="10"><br/>
number: <input type="number" name="email" size="10">
答案 0 :(得分：63)
似乎input类型number不支持size属性，或者它与浏览器不兼容，您可以通过CSS设置它：
input[type=number]{
width: 80px;
}
<强> Updated Fiddle
答案 1 :(得分：32)
使用不正确。
输入类型编号，通过箭头向上和向下选择值。
所以基本上你正在寻找＆＃34; width＆＃34; CSS样式。
历史上输入文本的格式是等宽字体，因此大小也是它所需的宽度。
输入数字是新的＆＃34;尺寸＆＃34;财产完全没有意义*。典型用法：
<input type="number" name="quantity" min="1" max="5">
修复，添加样式：
<input type="number" name="email" style="width: 7em">
编辑：如果你想要一个范围，你必须设置type="range"而不是="number"
EDIT2：*大小不是允许的值（所以，没有意义）。 查看官方W3C specifications
注意：size属性适用于以下输入类型：text， 搜索，电话，网址，电子邮件和密码。
提示：指定允许的最大字符数 element，使用maxlength属性。
答案 2 :(得分：14)
不是设置长度，而是设置数字输入的最大值和最小值。
然后输入框调整大小以适合最长的有效值。
如果您想允许3位数字，请将999设为最大值
<input type="number" name="quantity" min="0" max="999">
答案 3 :(得分：5)
对于<input type=number>，HTML5 CR不允许使用size属性。但是，在Obsolete features中它表示：“作者不应该，但可能在本规范的其他地方有相反的要求，请在类型属性处于Number状态的输入元素上指定maxlength和size属性。无论如何使用这些属性的一个正当理由是帮助不支持type =“number”的输入元素的旧用户代理仍然使用有用的宽度呈现文本字段。“
因此，可以使用size属性，但它只会影响不支持type=number的旧浏览器，因此该元素会回退到简单的文本控件<input type=text>。
这背后的基本原理是，浏览器应该提供一个用户界面，将其他属性考虑在内，以获得良好的可用性。由于实现可能会有所不同，因此作者强加的任何大小都可能会搞砸。 （这也适用于在CSS中设置控件的宽度。）
结论是，您应该在或多或少的流体设置中使用<input type=number>，而不会对元素的维度做出任何假设。
答案 4 :(得分：0)
您想要的是maxlength。
对于
text，search，url，tel，password有效，它定义了最大字符数（作为UTF-16代码单位），用户可以输入该字段。必须为0或更高的整数。如果未指定maxlength或指定了无效值，则该字段没有最大长度。此值也必须大于或等于minlength的值。
您可以考虑使用以下input类型之一。
答案 5 :(得分：-1)
使用on onkeypress事件。邮政编码框的示例。它允许最多5个字符，并检查以确保输入只是数字。
当然没有什么比服务器端验证更好，但这是一种非常好的方式。
<html>
<link rel="stylesheet" type="text/css" href="/static/style.css" />
<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
<body>
<div class="top">
<div class="div-img sub">
<img id="clip" src="/static/lists_of_men_cropped/41550_1821100522_1170-01047.jpg"/>
</div>
<div class="div-table sub">
<form action="/collector/183618/submit/" method="POST" enctype="multipart/form-data">
<input type='hidden' name='csrfmiddlewaretoken' value='GGVRrXaNH46axDImq2DEjEtV4mAaIiVLMpK6fpgyLXpLeVrIVOGICZ0SIMGtxeDV' />
<input type="hidden" name="form-TOTAL_FORMS" value="10" id="id_form-TOTAL_FORMS" /><input type="hidden" name="form-INITIAL_FORMS" value="10" id="id_form-INITIAL_FORMS" /><input type="hidden" name="form-MIN_NUM_FORMS" value="0" id="id_form-MIN_NUM_FORMS" /><input type="hidden" name="form-MAX_NUM_FORMS" value="1000" id="id_form-MAX_NUM_FORMS" />
<table id="id_data_table">
<input type="hidden" name="id" id="id_id" />
<thead><tr>
<th>field 1</th>
<th>field 2</th>
<th>field 3</th>
<th>field 4</th>
<th>field 5</th>
<th>field 6</th>
<th>field 7</th>
<th>field 8</th>
<th>field 9</th>
</tr></thead>
<tr>
<td>
<input type="text" name="field_1" id="id_field_1" />
</td>
<td>
<input type="text" name="field_2" id="id_field_2" />
</td>
<td>
<select name="field_3" id="id_field_3">
<option value="" selected> </option>
<option value="0">option a</option>
<option value="1">option b</option>
<option value="2">option c</option>
<option value="3">option d</option>
<option value="4">option e</option>
<option value="5">option f</option>
<option value="6">option g</option>
<option value="7">option h</option>
<option value="8">option i</option>
<option value="9">option j</option>
</select>
</td>
<td>
<input type="text" name="field_4" id="id_field_4" />
</td>
<td>
<input type="text" name="field_5" id="id_field_5" />
</td>
<td>
<input type="text" name="field_6" id="id_field_6" />
</td>
<td>
<input type="text" name="field_7" id="id_field_7" />
</td>
<td>
<input type="checkbox" name="field_8" id="id_field_8" />
</td>
<td>
<input type="checkbox" name="field_9" id="id_field_9" />
</td>
</tr>
<input type="hidden" name="id" id="id_id" />
<tr>
<td>
<input type="text" name="field_1" id="id_field_1" />
</td>
<td>
<input type="text" name="field_2" id="id_field_2" />
</td>
<td>
<select name="field_3" id="id_field_3">
<option value="" selected> </option>
<option value="0">option a</option>
<option value="1">option b</option>
<option value="2">option c</option>
<option value="3">option d</option>
<option value="4">option e</option>
<option value="5">option f</option>
<option value="6">option g</option>
<option value="7">option h</option>
<option value="8">option i</option>
<option value="9">option j</option>
</select>
</td>
<td>
<input type="text" name="field_4" id="id_field_4" />
</td>
<td>
<input type="text" name="field_5" id="id_field_5" />
</td>
<td>
<input type="text" name="field_6" id="id_field_6" />
</td>
<td>
<input type="text" name="field_7" id="id_field_7" />
</td>
<td>
<input type="checkbox" name="field_8" id="id_field_8" />
</td>
<td>
<input type="checkbox" name="field_9" id="id_field_9" />
</td>
</tr>
<input type="hidden" name="id" id="id_id" />
<tr>
<td>
<input type="text" name="field_1" id="id_field_1" />
</td>
<td>
<input type="text" name="field_2" id="id_field_2" />
</td>
<td>
<select name="field_3" id="id_field_3">
<option value="" selected> </option>
<option value="0">option a</option>
<option value="1">option b</option>
<option value="2">option c</option>
<option value="3">option d</option>
<option value="4">option e</option>
<option value="5">option f</option>
<option value="6">option g</option>
<option value="7">option h</option>
<option value="8">option i</option>
<option value="9">option j</option>
</select>
</td>
<td>
<input type="text" name="field_4" id="id_field_4" />
</td>
<td>
<input type="text" name="field_5" id="id_field_5" />
</td>
<td>
<input type="text" name="field_6" id="id_field_6" />
</td>
<td>
<input type="text" name="field_7" id="id_field_7" />
</td>
<td>
<input type="checkbox" name="field_8" id="id_field_8" />
</td>
<td>
<input type="checkbox" name="field_9" id="id_field_9" />
</td>
</tr>
<input type="hidden" name="id" id="id_id" />
<tr>
<td>
<input type="text" name="field_1" id="id_field_1" />
</td>
<td>
<input type="text" name="field_2" id="id_field_2" />
</td>
<td>
<select name="field_3" id="id_field_3">
<option value="" selected> </option>
<option value="0">option a</option>
<option value="1">option b</option>
<option value="2">option c</option>
<option value="3">option d</option>
<option value="4">option e</option>
<option value="5">option f</option>
<option value="6">option g</option>
<option value="7">option h</option>
<option value="8">option i</option>
<option value="9">option j</option>
</select>
</td>
<td>
<input type="text" name="field_4" id="id_field_4" />
</td>
<td>
<input type="text" name="field_5" id="id_field_5" />
</td>
<td>
<input type="text" name="field_6" id="id_field_6" />
</td>
<td>
<input type="text" name="field_7" id="id_field_7" />
</td>
<td>
<input type="checkbox" name="field_8" id="id_field_8" />
</td>
<td>
<input type="checkbox" name="field_9" id="id_field_9" />
</td>
</tr>
<input type="hidden" name="id" id="id_id" />
<tr>
<td>
<input type="text" name="field_1" id="id_field_1" />
</td>
<td>
<input type="text" name="field_2" id="id_field_2" />
</td>
<td>
<select name="field_3" id="id_field_3">
<option value="" selected> </option>
<option value="0">option a</option>
<option value="1">option b</option>
<option value="2">option c</option>
<option value="3">option d</option>
<option value="4">option e</option>
<option value="5">option f</option>
<option value="6">option g</option>
<option value="7">option h</option>
<option value="8">option i</option>
<option value="9">option j</option>
</select>
</td>
<td>
<input type="text" name="field_4" id="id_field_4" />
</td>
<td>
<input type="text" name="field_5" id="id_field_5" />
</td>
<td>
<input type="text" name="field_6" id="id_field_6" />
</td>
<td>
<input type="text" name="field_7" id="id_field_7" />
</td>
<td>
<input type="checkbox" name="field_8" id="id_field_8" />
</td>
<td>
<input type="checkbox" name="field_9" id="id_field_9" />
</td>
</tr>
<input type="hidden" name="id" id="id_id" />
<tr>
<td>
<input type="text" name="field_1" id="id_field_1" />
</td>
<td>
<input type="text" name="field_2" id="id_field_2" />
</td>
<td>
<select name="field_3" id="id_field_3">
<option value="" selected> </option>
<option value="0">option a</option>
<option value="1">option b</option>
<option value="2">option c</option>
<option value="3">option d</option>
<option value="4">option e</option>
<option value="5">option f</option>
<option value="6">option g</option>
<option value="7">option h</option>
<option value="8">option i</option>
<option value="9">option j</option>
</select>
</td>
<td>
<input type="text" name="field_4" id="id_field_4" />
</td>
<td>
<input type="text" name="field_5" id="id_field_5" />
</td>
<td>
<input type="text" name="field_6" id="id_field_6" />
</td>
<td>
<input type="text" name="field_7" id="id_field_7" />
</td>
<td>
<input type="checkbox" name="field_8" id="id_field_8" />
</td>
<td>
<input type="checkbox" name="field_9" id="id_field_9" />
</td>
</tr>
<input type="hidden" name="id" id="id_id" />
<tr>
<td>
<input type="text" name="field_1" id="id_field_1" />
</td>
<td>
<input type="text" name="field_2" id="id_field_2" />
</td>
<td>
<select name="field_3" id="id_field_3">
<option value="" selected> </option>
<option value="0">option a</option>
<option value="1">option b</option>
<option value="2">option c</option>
<option value="3">option d</option>
<option value="4">option e</option>
<option value="5">option f</option>
<option value="6">option g</option>
<option value="7">option h</option>
<option value="8">option i</option>
<option value="9">option j</option>
</select>
</td>
<td>
<input type="text" name="field_4" id="id_field_4" />
</td>
<td>
<input type="text" name="field_5" id="id_field_5" />
</td>
<td>
<input type="text" name="field_6" id="id_field_6" />
</td>
<td>
<input type="text" name="field_7" id="id_field_7" />
</td>
<td>
<input type="checkbox" name="field_8" id="id_field_8" />
</td>
<td>
<input type="checkbox" name="field_9" id="id_field_9" />
</td>
</tr>
<input type="hidden" name="id" id="id_id" />
<tr>
<td>
<input type="text" name="field_1" id="id_field_1" />
</td>
<td>
<input type="text" name="field_2" id="id_field_2" />
</td>
<td>
<select name="field_3" id="id_field_3">
<option value="" selected> </option>
<option value="0">option a</option>
<option value="1">option b</option>
<option value="2">option c</option>
<option value="3">option d</option>
<option value="4">option e</option>
<option value="5">option f</option>
<option value="6">option g</option>
<option value="7">option h</option>
<option value="8">option i</option>
<option value="9">option j</option>
</select>
</td>
<td>
<input type="text" name="field_4" id="id_field_4" />
</td>
<td>
<input type="text" name="field_5" id="id_field_5" />
</td>
<td>
<input type="text" name="field_6" id="id_field_6" />
</td>
<td>
<input type="text" name="field_7" id="id_field_7" />
</td>
<td>
<input type="checkbox" name="field_8" id="id_field_8" />
</td>
<td>
<input type="checkbox" name="field_9" id="id_field_9" />
</td>
</tr>
<input type="hidden" name="id" id="id_id" />
<tr>
<td>
<input type="text" name="field_1" id="id_field_1" />
</td>
<td>
<input type="text" name="field_2" id="id_field_2" />
</td>
<td>
<select name="field_3" id="id_field_3">
<option value="" selected> </option>
<option value="0">option a</option>
<option value="1">option b</option>
<option value="2">option c</option>
<option value="3">option d</option>
<option value="4">option e</option>
<option value="5">option f</option>
<option value="6">option g</option>
<option value="7">option h</option>
<option value="8">option i</option>
<option value="9">option j</option>
</select>
</td>
<td>
<input type="text" name="field_4" id="id_field_4" />
</td>
<td>
<input type="text" name="field_5" id="id_field_5" />
</td>
<td>
<input type="text" name="field_6" id="id_field_6" />
</td>
<td>
<input type="text" name="field_7" id="id_field_7" />
</td>
<td>
<input type="checkbox" name="field_8" id="id_field_8" />
</td>
<td>
<input type="checkbox" name="field_9" id="id_field_9" />
</td>
</tr>
<input type="hidden" name="id" id="id_id" />
<tr>
<td>
<input type="text" name="field_1" id="id_field_1" />
</td>
<td>
<input type="text" name="field_2" id="id_field_2" />
</td>
<td>
<select name="field_3" id="id_field_3">
<option value="" selected> </option>
<option value="0">option a</option>
<option value="1">option b</option>
<option value="2">option c</option>
<option value="3">option d</option>
<option value="4">option e</option>
<option value="5">option f</option>
<option value="6">option g</option>
<option value="7">option h</option>
<option value="8">option i</option>
<option value="9">option j</option>
</select>
</td>
<td>
<input type="text" name="field_4" id="id_field_4" />
</td>
<td>
<input type="text" name="field_5" id="id_field_5" />
</td>
<td>
<input type="text" name="field_6" id="id_field_6" />
</td>
<td>
<input type="text" name="field_7" id="id_field_7" />
</td>
<td>
<input type="checkbox" name="field_8" id="id_field_8" />
</td>
<td>
<input type="checkbox" name="field_9" id="id_field_9" />
</td>
</tr>
</table>
<p/>
<div class="div-submit">
<input type="submit"/>
</div>
</form>
</div>
</div>
</body>
<script>
function copyTextValue(bf) {
var text = document.getElementsByClassName("call-number")[0].value ;
elements = document.getElementsByClassName("call-number");
for (var i = 0; i < elements.length; i++){
elements[i].value = text
}
}
</script>
</html>
function validInput(e) {
e = (e) ? e : window.event;
a = document.getElementById('zip-code');
cPress = (e.which) ? e.which : e.keyCode;
if (cPress > 31 && (cPress < 48 || cPress > 57)) {
return false;
} else if (a.value.length >= 5) {
return false;
}
return true;
}#zip-code {
overflow: hidden;
width: 60px;
}
答案 6 :(得分：-1)
将type =“ number”更改为type =“ tel”