采用IP地址的输入字段的最佳做法是什么?
What is the best practice for an input field that takes an IP-Address?
即:数字和点.
我最初选择了 type ='number',但是,我注意到,只要输入 second 点.按下一个数字,我的提交"按钮将被禁用.
I've initially chosen type='number', However, I noticed that as soon as I type a second dot . followed by the next number, my submit button gets disabled.
例如:123.124.4(关闭了轰!"按钮)
以上是由于 type = number 时使用十进制考虑的原因吗?
Is the above due to a decimal consideration when it comes to type=number ?
<input type="number" class="input-box" placeholder="xxx.xxx.xxx.xx" autocomplete="off" />有没有一种解决方法,而无需使用< input type ='text'/> ?
Is there a way out of this without going with <input type='text'/> ?
推荐答案是的,有一种方法可以通过HTML使用输入来获取IP地址,而无需使用文本类型(例如类型编号).这些选项需要四个输入框,每个八位字节一个.
Yes, there is a way to take an IP address via HTML using input without using text type, like a type number. The options would require four input boxes, one for each octet.
由于没有HTML输入类型与IPv4地址完全匹配,并且如果您要坚持使用单个输入字段类型,则文本的最小长度,最大长度和模式属性相对简单.
Since there is no HTML input type that matches IPv4 address exactly and if you want to stick to a single input field type text is relatively simple with minlength, maxlength, and pattern attributes.
裸露的HTML:
<input type="text" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">出于安全原因,请确保您始终验证提交的数据在服务器端,而不仅仅是客户端.您可以使用相同的正则表达式模式.
For security reasons ensure you always validate submitted data server side, not just client side. You can use same regex pattern.
*更新3/2/2019 * 添加了三种IPv6地址正则表达式格式.
* Update 3/2/2019 * Added three IPv6 address regex formats.
仅接受长格式的IPv6地址:
Only accepts IPv6 addresses in long form:
<input type="text" pattern="^([0-9a-fA-F]{4}:){7}[0-9a-fA-F]{4}$">接受长和中等格式的IPv6地址(中等允许前导零):
Accepts long and medium form IPv6 addresses (medium allows leading zeros):
<input type="text" pattern="^([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$">接受长和中等格式的IPv6地址(不带前导零的中号):
Accepts long and medium form IPv6 addresses (medium without leading zeros):
<input type="text" pattern="^(([0-9a-fA-F]{1}|[1-9a-fA-F]{1}[0-9a-fA-F]{1,3}):){7}([0-9a-fA-F]{1}|[1-9a-fA-F]{1}[0-9a-fA-F]{1,3})$">更多推荐
正确的IP地址输入类型
发布评论