Bootstrap Select与JQuery虚拟键盘冲突
这是一个很好的选择。基本上,我特别使用两个库来获得我想要的。引导选择:Bootstrap Select与JQuery虚拟键盘冲突
https://silviomoreto.github.io/bootstrap-select/
和jQuery虚拟键盘:
https://mottie.github.io/Keyboard/
(由以防有人的链接找到他们自己的东西很有用)
我用bootstral选择,因为作为选择组出现的查询数据非常大,因此在其中添加输入字段实用程序以使其更易于用户使用。我们还需要一个虚拟键盘,这正是我们添加jquery插件的原因。问题是,当我们触摸选择输入并且键盘出来时,我们键入的任何内容都不会被过滤。也补充道,键盘迄今似乎只对常规输入文本字段
在最简单的形式工作,这是我使用生成键盘以及初始化选择选择器代码:
let virtualK =()=> {
$('.buscame')
.keyboard({
layout: 'qwerty',
position: {
of : $(window),
my : 'center bottom',
at : 'center bottom',
at2: 'center bottom'
}
})
.addTyping();
}
$(document).ready(function(){
$('#example').selectpicker({});
$('#Transfer').selectpicker({});
$('#Chofer').selectpicker({});
$('#Transportista').selectpicker({});
$('#localidad').selectpicker({});
$('#Cliente').selectpicker({});
// Initialize the keyboard
virtualK();
});
至于选择标签,代码读取这样的:
<select name="Transfer" size="1" id="Transfer" class="form-control select-picker buscame" data-live-search="true" required onChange="javascript:OnChangeOperador()">
,我面临的另一个问题是,如果我试图通过传递.buscame
作为标识符运行JS代码,然后键盘不出现,如果我选择了一般标识符为input
它的工作原理。引导选择文件没有显示任何方式来添加一个id为他们自动生成的输入框,所以这似乎不是一种选择(如果有人知道否则告诉)
那么,有没有人知道的方法使虚拟键盘在自定义选择的内部搜索框上工作?或者如何将ID添加到生成的输入过滤器字段?
编辑:
我尝试使用
let virtualK =()=> {
$('input[role="textbox"]')
.keyboard({
layout: 'qwerty',
position: {
of : $(window),
my : 'center bottom',
at : 'center bottom',
at2: 'center bottom'
}
})
.addTyping();
}
但它确实是相同的,虚拟键盘打开了,但不管我输入没有得到过滤。
我花了一段时间,因为的jsfiddle和jsbin是搞笑,但这里是这个问题的娱乐:
您需要设置相关的输入值,并触发的propertychange
该输入是为了告诉bootstrap-select
输入的值是变化的。
change: function(e, keyboard) {
keyboard.$el.val(keyboard.$preview.val())
keyboard.$el.trigger('propertychange')
}
这里有一个更新了自己的codepen:
https://codepen.io/anon/pen/EvGpvz
谢谢德克尔,像一个魅力一样工作。我正在阅读有关更改函数及其工作方式的文档,但我无法看到您是如何与此连接的。我想我会一直盯着定义,直到它有意义。那么,谢谢你的时间和帮助。 –
让我知道你不明白哪个/哪部分代码:) – Dekel
那么,例如,更改文档指出,在每次键盘交互时调用更改回调,而不管usePreview选项的设置。 usePreview(用于我可以收集的内容)根据哪个输入字段是打开的(正确的?)键盘而改变。$ el指的是键盘输入的jquery对象,所以当你将val设置为键盘时。$ preview.val()你是将价值改变为重点投入?我得到的代码,如果有什么,我很惊讶你如何设法找到你需要的东西,以帮助我这么快解决这个问题! –
添加的jsfiddle /片断作为工作示例 – Dekel
@Dekel肯定,让我写完它 –
@Dekel加入吧!对不起,花了这么长时间,陷入了困境。 –