我正在创建一个颜色选择器,但我想让用户选择透明颜色的可能性,我使用屏蔽输入同时过滤十六进制输入和字母,一切在一个输入中。
你可以在JSFiddle上看到:https://jsfiddle.net/Lindow/60u9wygp/7/
每当用户点击"透明"按钮输入的值应该是'无'每当他点击颜色时,输入中应该有十六进制颜色。
这个片段很长,但还有很多事情要做,所以理解起来很简单。
$(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">
&#13;
关于我如何解决这个问题的任何建议?
答案 0 :(得分:2)
之前我从未使用过屏蔽输入,但我认为我是从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
。