JQuery 或 Javascript 输入 IP 地址掩码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14373425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery or Javascript Input IP address mask
提问by Miqdad Ali
I have used jquery masked input plugin as per stackoverflow question
我根据stackoverflow问题使用了jquery屏蔽输入插件
Input box for changing IP Address
but It didn't worked for me .
但它对我不起作用。
I have used it like $("input").mask("9?99.9?99.9?99.9?99", {placeholder:" "});
我用过它 $("input").mask("9?99.9?99.9?99.9?99", {placeholder:" "});
This demo (http://jsfiddle.net/3F2gM/3/) i found in previous question , but it didnt works
我在上一个问题中找到了这个演示（http://jsfiddle.net/3F2gM/3/），但它不起作用
回答by Joel Valdivia
It worked for me this way:
它以这种方式对我有用：
First, I added jquery-mask in the html:
首先，我在 html 中添加了 jquery-mask：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
Then I typed the text field with the class .ip_address:
然后我输入了类 .ip_address 的文本字段：
<label>ip:</label> <input class="ip_address" type="text" name="ip">
by last:
最后：
$('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', { translation: { 'Z': { pattern: /[0-9]/, optional: true } } });
回答by sasi
This may help you:-
I have 4 input fields, each of its border was hided. Only the parent of the input field has the border, which will make it to look like a single text box.
After that, allow the user to enter only 3 characters by using maxLength, once the user reached the maximum length, focus on to next field.
The code follows:- Link
这可能对您有所帮助：-
我有 4 个输入字段，每个字段的边框都被隐藏了。只有输入字段的父级有边框，这将使它看起来像一个文本框。之后，允许用户使用maxLength仅输入 3 个字符，一旦用户达到最大长度，则关注下一个字段。
代码如下：-链接
HTML
HTML
<div>
<input type="text" maxlength="3" class="onlythree" />.
<input type="text" maxlength="3" class="onlythree" />.
<input type="text" maxlength="3" class="onlythree" />.
<input type="text" maxlength="3" class="onlythree" />
</div>
CSS
CSS
.onlythree{
width: 50px;
border: 0;
}
div{
border: 1px solid gray;
display: inline-block;
}
JS
JS
$(".onlythree").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.onlythree').focus();
}
});
回答by will824
Actually I needed something similar to what you needed and what I did was to contact Igor Escobar, the author of Jquery Mask Plugin. There is not a complete built in way to do it yet, so he directed me to one option this could be accomplished and here I share the result:.
实际上我需要一些类似于你需要的东西，我所做的是联系Jquery Mask Plugin的作者 Igor Escobar 。还没有一个完整的内置方法来做到这一点，所以他指导我选择一个可以完成的选项，在这里我分享结果：。
HTML
HTML
<input type="text" id="networkSectionIpAddress" class="ip_address" >
Javascript:
Javascript：
var options = {
onKeyPress: function(cep, event, currentField, options){
// console.log('An key was pressed!:', cep, ' event: ', event,'currentField: ', currentField, ' options: ', options);
if(cep){
var ipArray = cep.split(".");
var lastValue = ipArray[ipArray.length-1];
if(lastValue != "" && parseInt(lastValue) > 255){
ipArray[ipArray.length-1] = '255';
var resultingValue = ipArray.join(".");
currentField.attr('value',resultingValue);
}
}
}};
$('.ip_address').mask("000.000.000.000", options);
I hope this information is helpful for those using this great JQuery Mask plugin :)
我希望这些信息对那些使用这个很棒的 JQuery Mask 插件的人有帮助:)
回答by vakorovin
I solved the problem differently. In the above example, the only change is the last octet, I change everything, because for quick commissioning can enter numbers greater than 255. In addition, when viewed through firebug, the value is set in the input, and the displayed text is the same as the user enters.
我以不同的方式解决了这个问题。在上面的例子中，唯一的变化是最后一个八位字节，我什么都改变了，因为为了快速调试可以输入大于255的数字。另外，通过firebug查看时，输入中设置了该值，显示的文本是与用户输入相同。
HTML
HTML
<input type="text" name="vpn_ip" class="mask-ipv4" value="">
Java Script
Java脚本
var options = {
onChange: function(cep, event, currentField, options){
if(cep){
var ipArray = cep.split(".");
for (i in ipArray){
if(ipArray[i] != "" && parseInt(ipArray[i]) > 255){
ipArray[i] = '255';
}
}
var resultingValue = ipArray.join(".");
$(currentField).val(resultingValue);
}
}
};
$('.mask-ipv4').mask("000.000.000.000", options);
回答by t_m27
Joel Valdivia's answer doesn't make sure that each item in the ip array <= 255, and will824's answer doesn't allow for < 3 digits for an item.
乔尔·瓦尔迪维亚 (Joel Valdivia) 的回答并不能确保 ip 数组中的每个项目 <= 255，而 will824 的回答不允许一个项目小于 3 位数字。
Here is a complete example based on their answers that meets both criteria.
这是一个完整的例子，基于他们的答案，符合这两个标准。
var options = {
onKeyPress: function(text, event, currentField, options){
if (text){
var ipArray = text.split(".");
var lastValue = ipArray[ipArray.length-1];
if(lastValue != "" && parseInt(lastValue) > 255){
ipArray[ipArray.length-1] = '255';
var resultingValue = ipArray.join(".");
currentField.text(resultingValue).val(resultingValue);
}
}
},
translation: {
'Z': {
pattern: /[0-9]/, optional: true
}
}
};
$(".ipaddr").mask("0ZZ.0ZZ.0ZZ.0ZZ", options);
回答by Алексей
function getChar(event) {
if (event.which == null) {
if (event.keyCode < 32) return null;
return String.fromCharCode(event.keyCode)
}
if (event.which != 0 && event.charCode != 0) {
if (event.which < 32) return null;
return String.fromCharCode(event.which);
}
return null;
}
function maskIP(e){
let key = getChar(e);
if((!((key >= 0 && key <= 9) || key == '.')) || this.value.length >= 15) e.preventDefault();
if (this.value.indexOf('.') == -1){
if (this.value.length >= 3 && key != '.') {
e.preventDefault();
}
}
else{
if(this.value.lastIndexOf('.') == this.value.length - 1 && key == '.') {
e.preventDefault();
}
if ((this.value.length - this.value.lastIndexOf('.') > 3 && key != '.') || (key == '.' && this.value.split(".").length - 1 >= 3)) {
e.preventDefault();
}
}
}
serch.addEventListener('keypress', maskIP);
回答by Rashad Aliyev
it works in my case.
它适用于我的情况。
var ip_options = {
translation: { 'Z': { pattern: /[0-9]/, optional: true } },
onKeyPress: function(cep, event, currentField, options) {
if(cep) {
var ipArray = cep.split(".");
for (i in ipArray){
if(ipArray[i] != "" && parseInt(ipArray[i]) > 255){
ipArray[i] = '255';
}
}
var resultingValue = ipArray.join(".");
$(currentField).val(resultingValue);
}
}
};
$('.ip_address').mask("0ZZ.0ZZ.0ZZ.0ZZ", ip_options);
