如何使两个 maskedinput 在单个输入上工作？答案

【问题标题】：How to make two maskedinput work on a single input?如何使两个 maskedinput 在单个输入上工作？
【发布时间】：2018-01-16 15:01:46
【问题描述】：

我正在创建一个颜色选择器，但我想让用户可以选择透明作为颜色，我正在使用蒙版输入同时过滤十六进制输入和字母，所有内容都在一个输入中。

您可以在 JSFiddle 上查看：https://jsfiddle.net/Lindow/60u9wygp/7/

每当用户点击“透明”按钮时，输入的值应该是“无”，每当他点击颜色时，输入中应该是十六进制颜色。

sn-p 很长，但内容不多，所以很容易理解。

$(document).ready(function() {

  $('.colorbox').click(function(element) {
    $(".colorpickertext").val(element.target.value)
    $("#colorpicker").css({
      'background': element.target.value
    });
  });

  $('.colorbox-transparent').click(function(element) {
    $(".colorpickertext").val('None')
    $("#colorpicker").css({
      'background': '#fafafa'
    });
  });

  $(".colorpickertext").keyup(function(element) {
    $("#colorpicker").css({
      'background': element.target.value
    });
  });

  var hexadecimal = [{
    "mask": "\\#hhhhhh"
  }, {
    "mask": "llll"
  }];
  $('.colorpickertext').inputmask({
    mask: hexadecimal,
    greedy: false,
    definitions: {
      'h': {
        validator: "[A-Fa-f0-9]",
        cardinality: 1
      },
      'l': {
        validator: "[a-zA-Z ]",
        cardinality: 1
      },
    }
  });
});

button {padding:20px;}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="colorpicker">input below should be "None" on transparent button click</div>
<button class="colorbox" value="None" style="background:#ffffff;">transparent</button>
<button class="colorbox" value="#ffbf00" style="background:#ffbf00;"></button>
<input type="text" class="colorpickertext form-control" placeholder="ex: #4dadc9">

有什么建议可以解决这个问题吗？

【问题讨论】：

标签： javascript jquery html maskedinput

【解决方案1】：

我以前从未使用过掩码输入，但我想我是从docs 中解决的。您已经使用了两个掩码选项，您只需要添加第三个。我做了第三个接受“无”：

var hexadecimal = [{
  "mask": "N"
}, {
  "mask": "\\#hhhhhh"
}, {
  "mask": "llll"
}];
$('.colorpickertext').inputmask({
  mask: hexadecimal,
  greedy: false,
  definitions: {
    'h': {
      validator: "[A-Fa-f0-9]",
      cardinality: 1
    },
    'l': {
      validator: "[a-zA-Z ]",
      cardinality: 1
    },
    'N': {
      validator: "None",
      cardinality: 4
    },
  }
});

掩码的顺序很重要 - 您必须先查找“无”，这样它才不会被过滤为 #e。

【讨论】：