2016-09-04 1 views
1

Ich versuche, virtuelle Tastatur in ionischen modalen Eingabe zu implementieren. Dafür benutze ich diese Bibliothek, die auf jQuery basiert Mottie Keyboard, ng-virtual-keyboard basiert. Ich habe dies in meinem Code implementiert, aber wenn ich es mit ionischen modalen Eingaben verwende, ist die Tastatur zwar sichtbar, aber nicht in der Lage zu klicken. Wenn ich zum Beispiel auf die virtuelle Tastatur klicke, wird der Bereich darunter angeklickt.ng-virtuelle-Tastatur funktioniert nicht mit ionischen modalen

ich alle angegebenen Skripte aufgenommen haben, hier ist mein Code

<script src="js/jquery.js"></script> 
<script src="lib/jquery-ui/jquery-ui.min.js"></script> 
<script src="lib/keyboard/dist/js/jquery.keyboard.min.js"></script> 
<script src="lib/keyboard/dist/js/jquery.keyboard.extension-typing.min.js"></script> 
<script src="lib/ng-virtual-keyboard/dist/ng-virtual-keyboard.min.js"></script> 

Und wenn der modal angezeigt wird, ich mache das

$scope.$on('modal.hidden', function() { 
    // Execute action 
    $('.modal input').each(function() { 
     $(this).data('keyboard').destroy(); 
    }); 
}); 

$scope.$on('modal.shown', function(event) { 
    // Execute action 
    var asdf = $('.modal input').keyboard(); 
    $('.modal input').keyboard({ 
     layout: 'qwerty', 
     usePreview: false 
    }) 
    // activate the typing extension 
    .addTyping({ 
     showTyping: true, 
     delay: 50 
    }); 
}); 

enter image description here ich alles versucht, ich kann Um das zu beheben, kann jemand bitte einige Fixes vorschlagen?

Antwort

0

Ich habe es gelöst, indem Sie die css-Eigenschaft pointer-events: auto; zum Popup hinzufügen. Diese

ist, wie der neue Code wie

sieht

In HTML

<input type="search" ng-model="searchText" ng-virtual-keyboard="kb_config"> 

In Controller,

$scope.kb_config={ 
    layout: 'qwerty', 
    usePreview: false, 
    autoAccept: true, 
    autoUpdateModel: true, 
    css:{popup:'aiv-keyboard'} 
} 

und in css,

.aiv-keyboard{ 
    pointer-events: auto; 
} 
Verwandte Themen