我想为带有掩码和自动完成功能的日期时间输入。
我创建了小 demo哪里有问题。
看起来自动完成认为掩码是一个文本......只有当我完成输入时我才能看到自动完成的一些值(如果它存在于自动完成列表中)。
有什么解决办法吗?
<input name="field1" id="field1" class="inputmask" data-inputmask="'mask': 'h:s t\\m','placeholder': 'hh:mm xm', 'hourFormat': '12', 'alias': 'datetime'"/>
function generateTime(){
var times = [];
Array(24).join(',').split(',').forEach(function (_, index) {
var hour = index;
if (hour < 10) {
hour = '0' + hour;
}
times.push(moment(hour + ':00', 'HH:mm').format('hh:mm a'));
times.push(moment(hour + ':30', 'HH:mm').format('hh:mm a'));
});
return times;
}
$('.inputmask').inputmask();
$('.inputmask').autocomplete({
source: generateTime()
});
更新:
也许一些解决方案的起点:如果我将添加属性 'autoUnmask' : true
AutoComplete 将仅在“小时”内工作 - 第一个符号直到我的掩码中的“:”。
最佳答案
这里的问题是 input
的 value 正在从 inputmask
传递到 autocomplete
。
输入值时检查
input
的值:function generateTime() { var times = []; Array(24).join(',').split(',').forEach(function(_, index) { var hour = index; if (hour < 10) { hour = '0' + hour; } times.push(moment(hour + ':00', 'HH:mm').format('hh:mm a')); times.push(moment(hour + ':30', 'HH:mm').format('hh:mm a')); }); return times; } $('.inputmask').inputmask(); $('.inputmask').autocomplete({ source: generateTime() }); $('#button').click(function() { console.log($('input').val()) });
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/jquery.inputmask.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.regex.extensions.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.date.extensions.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> <input name="field1" id="field1" class="inputmask" data-inputmask="'mask': 'h:s t\\m','placeholder': 'hh:mm xm', 'hourFormat': '12', 'alias': 'datetime'" /> <button id="button">Get</button>
当
autoUnmask: true
已设置时,检查input
的值:function generateTime() { var times = []; Array(24).join(',').split(',').forEach(function(_, index) { var hour = index; if (hour < 10) { hour = '0' + hour; } times.push(moment(hour + ':00', 'HH:mm').format('hh:mm a')); times.push(moment(hour + ':30', 'HH:mm').format('hh:mm a')); }); return times; } $('.inputmask').inputmask(); $('.inputmask').autocomplete({ source: generateTime() }); $('#button').click(function() { console.log($('input').val()) });
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/jquery.inputmask.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.regex.extensions.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.date.extensions.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> <input name="field1" id="field1" class="inputmask" data-inputmask="'mask': 'h:s t\\m','placeholder': 'hh:mm xm', 'hourFormat': '12', 'alias': 'datetime','autoUnmask':true" /> <button id="button">Get</button>
我想现在您已经掌握了要点!
所以这是从 inpumask
传递到 autocomplete
的 unmasked 值之间的链接:
向自动完成数据添加了
label
和value
。创建一个监听器以匹配
label
和value
(默认情况下仅匹配label
)-modeled on the example here
.同时设置
autoUnmask: true
和alias: 'h:s t'
:<input name="field1" id="field1" class="inputmask" data-inputmask="'mask': 'h:s t\\m','placeholder': 'hh:mm xm', 'alias': 'h:s t','autoUnmask':true" />
Updated fiddle here
和下面的演示片段:
function generateTime() {
var times = [];
Array(24).join(',').split(',').forEach(function(_, index) {
var hour = index;
if (hour < 10) {
hour = '0' + hour;
}
times.push({
label: moment(hour + ':00', 'HH:mm').format('hh:mm a'),
value: moment(hour + ':00', 'HH:mm').format('hhmma')
});
times.push({
label: moment(hour + ':30', 'HH:mm').format('hh:mm a'),
value: moment(hour + ':30', 'HH:mm').format('hhmma')
});
});
return times;
}
$('.inputmask').inputmask();
$('.inputmask').autocomplete({
source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(generateTime(), function(value) {
return matcher.test(value.value) || matcher.test(value.label);
}));
}
});
$('#button').click(function() {
console.log($('input').val())
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/jquery.inputmask.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.regex.extensions.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.date.extensions.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<input name="field1" id="field1" class="inputmask" data-inputmask="'mask': 'h:s t\\m','placeholder': 'hh:mm xm', 'alias': 'h:s t','autoUnmask':true" />
<button id="button">Get</button>
关于javascript - 具有自动完成功能的 InputMask,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41046514/