Question

嘿伙计们我的键盘和焦点行为有问题。我正在开发一种带有角度，离子，cordova的混合应用程序

目前，当用户自动输入视图时，表格的第一个输入字段将被聚焦，这是一个要求，因为用户应该能够使用物理设备扫描仪来扫描条形码，因此需要关注。我的问题是键盘显示的焦点，我想阻止它。我已经使用了$timeout和cordova.plugins.Keyboard.close()，但键盘有时会显示并隐藏一段时间。我也尝试从插件中监听v native.keyboardshow，但我无法将键盘显示前的事件。

window.addEventListener('native.keyboardshow', keyboardShowHandler);

    function keyboardShowHandler(e) {
        console.log(e)
    }

目标是：

1）进入视图时，第一个输入被聚焦，键盘不显示

2）当用户点击字段时键盘显示

3）当他点击其他地方解除它隐藏的键盘时，焦点仍在现场激活

4）当他在字段中输入一个值并按下回车键时，他跳转到下一个或如果最后一个字段提交表单。

5）当他点击一个字段并且已经有一个值时，选择了整个值，这样他就可以通过1次点击删除全部

我已经为我的所有输入创建了一个焦点直观，这种输入效果很好，期望没有键盘部分的自动对焦。

.directive('focus', function ($timeout, Ls) {

return {
    restrict: 'A',
    link: function (scope, element, attrs) {

        element.on('click', function () {
            // only select the whole input field if it is not a url input field
            if (!(attrs.type == 'url' || attrs.type == 'number')) {
                if (Ls.Get('persist_devicePlatform') == 'Android') {
                    this.select();
                    cordova.plugins.Keyboard.show();
                } else {
                    this.setSelectionRange(0, 9999);
                }
            }
        })

        element.bind('keydown', function (e, inputs) {
            var inputs = document.querySelectorAll('input[type="text"],input[type="password"],input[type="number"], input[type="url"], button.btnRight');
            var code = e.keyCode || e.which;
            var val = element[0].value;
            var requiredInputs = [];


            angular.forEach(inputs, function (value, index) {

                if (value.required == true || value.localName == 'button') {
                    requiredInputs.push(value);
                }
            });

            var current = document.activeElement;


            if (code === 13 && val != '' && val != undefined) {
                console.log(requiredInputs);
                e.preventDefault();
                var i = 0;

                while (i < requiredInputs.length) {
                    if (requiredInputs[i] == current) {
                        var nextInput = requiredInputs[i + 1];
                        if (i == requiredInputs.length - 2) {
                            // sends the form
                            nextInput.click();
                            cordova.plugins.Keyboard.close();
                        } else {
                            //focuses next input
                            nextInput.focus();
                            i = requiredInputs.length;
                        }
                    }
                    i++;
                }
            }
        });

         //sets the input field with id first to focus and opens the keyboard
        $timeout(function () {
            element[0].focus();
        }, 50);
// Here I currently close the Keyboard directly after opening
// But I would like to not even let it show at all
        $timeout(function () {
            cordova.plugins.Keyboard.close();
        }, 60);

        var inputs = document.querySelectorAll('input[type="text"],input[type="password"],input[type="number"], input[type="url"]');
        var arrInputs = [];

        angular.forEach(inputs, function (value, index) {
            arrInputs.push(value);
        });

        // if android then focus the input field without showing the keyboard - this is not working on ios so it is no focus on it
            if (Ls.Get('persist_devicePlatform') == 'Android') {                        

            element.bind('focusout', function (e) {
                        if (element[0].value === '') {
                            this.focus();
                            $timeout(function () {
                                cordova.plugins.Keyboard.close();
                            }, 60);                             
                        }
                    });
            }               
    }

}

})

这就是表单在我的应用中的样子

<form novalidate class="formWE10" name="FormWE10">
        <h4>{{lang.lblBestellungML}}</h4>
        <div class="list list-inset-p">
            <div class="item item-input">
                <span class="input-label">{{lang.lblBestellNrLangML}}</span>
                <input type="text" name="bestellnummer" id="First" ng-model="we.bestellnummer" required focus />
                <barcode-scan ng-if="devPlatform == 'iOS' || (devPlatform =='Android' && devVersion >= '4.4.2')" scancode="we.bestellnummer"></barcode-scan>
            </div>
            <div class="item item-input" ng-if="featureAktivierung.WE001 != true">
                <span class="input-label">{{lang.lblLieferDatumML}}</span>
                <input type="text" ng-model="we.deliveryDate" maxlength="6" ng-maxlength="6" ng-minlength="6" placeholder="DDMMYY" numbers-only ng-required="featureAktivierung.WE001 == false" focus />
            </div>
            <div class="item item-input" ng-if="featureAktivierung.WE002 != true">
                <span class="input-label">{{lang.lblLieferscheinNrML}}</span>
                <input type="text" ng-model="we.deliveryNumber" ng-required="featureAktivierung.WE002 == false" focus />
            </div>
        </div>

    </form>

所以基本上我需要在进入视图时聚焦第一个输入时显示nativ键盘显示。

此致克里斯托弗

科尔多瓦键盘+焦点

0 个答案: