如何用按钮激活键盘？

Question

我是新手。 我正在使用Phonegap 做android（将来还有iOS）应用程序。我希望我的键盘在我点击某个按钮时打开并用按钮关闭。我从https://github.com/driftyco/ionic-plugins-keyboard 添加离子键盘插件并在 html 中添加按钮：

<div class="button">
             <button id="open_keyb">Click Me!</button>
         </div>

和javascript：

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        alert(1);
        cordova.plugins.Keyboard.show();
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

  app.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if(window.cordova){
            cordova.plugins && cordova.plugins.Keyboard && cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        alert('test');
    });
});

app.directive('input', function($timeout){
    return {
        restrict: 'E',
        scope: {
            'returnClose': '=',
            'onReturn': '&',
            'onFocus': '&',
            'onBlur': '&'
        },
        link: function(scope, element, attr){
            element.bind('focus', function(e){
                if(scope.onFocus){
                    $timeout(function(){
                        scope.onFocus();
                    });
                }
            });
            element.bind('blur', function(e){
                if(scope.onBlur){
                    $timeout(function(){
                        scope.onBlur();
                    });
                }
            });
            element.bind('keydown', function(e){
                if(e.which == 13){
                    if(scope.returnClose) element[0].blur();
                    if(scope.onReturn){
                        $timeout(function(){
                            scope.onReturn();
                        });
                    }
                }
            });
        }
    }
});
 .run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
    ionic.Platform.isFullScreen = true;
  });
})

var fn = function() {

    alert('test');
    document.getElementById('one').onclick = function() {
        alert('click');
        cordova.plugins.Keyboard.show();
    };

};

document.addEventListener('DOMContentLoaded', fn, false);

在 www 文件夹中。 这是行不通的。此警报也未显示。你能帮助我吗？如何使它工作？

Answer 1

没有事件监听器被添加到open_keyb 按钮，因此不会触发任何事件。

此外，由于您似乎正在使用移动设备，因此您可能还想添加 touchend 事件，尽管 click 在任何情况下都应该有效。

请尝试更换：

var fn = function() {

    alert('test');
    document.getElementById('one').onclick = function() {
        alert('click');
        cordova.plugins.Keyboard.show();
    };

};

document.addEventListener('DOMContentLoaded', fn, false);

用这个：

document.addEventListener('DOMContentLoaded',function(DOMLoaded){
   document.getElementById('open_keyb').addEventListener('click', function (clickEvent){
       alert('click');
       cordova.plugins.Keyboard.show();
   });
});