Как предотвратить открытие клавиатуры на портативных устройствах при использовании панели для подписи на холсте?

Question

У меня есть небольшое окно подтверждения в моем приложении, где пользователь должен ввести имя и сообщение, а затем поставить свою подпись. Моя проблема заключается в том, что когда пользователь вводит имя, фокус приложения не исчезает, когда кто-то использует панель для подписи, в результате чего виртуальная клавиатура усиливается в тот момент, когда пользователь отпускает палец с сенсорного экрана. Эта проблема с фокусировкой возникает только на мобильных устройствах и возникает как на устройствах Android, так и на устройствах Apple.

Я пытался использовать JQuery, Javascript и даже решения Knockout, такие как focus.blur и .focus (), но, похоже, ничего не работает. Это как нажатие на холст HTML5 на мобильных устройствах не отвлекает внимание.

<div class="row">
    <div class="col-md-6">
        <form-group params="value: NameSignatory, attr: {'data-test-id':'name'}"></form-group>
        <form-group params="value: EmailSignatory, attr: {'data-test-id':'email'}"></form-group>
        <form-group params="value: SignatoryComment, attr: {'data-test-id':'comment'}"></form-group>

        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
    </div>
    <div class="col-md-6">
        <div class="form-group has-feedback" data-bind="validationElement: SignatureJson">
            <label class="large">Put your signature here:</label>
            <em class="help-block" data-bind="validationMessage: SignatureJson"></em>
            <signature-pad-v2 params="json: SignatureJson, imageUrl: ImageFileUrl"></signature-pad-v2>

        </div>
    </div>
</div>

Сценарий:

define([
"knockout",
"jquery",
"szimek-signature-pad",
"text!./signature-pad-v2.html"

], функция (ko, $, SignaturePad, template) {

return {
    template: template,
    viewModel: {
        createViewModel: function (params, componentInfo) {
            var canvas,
                signaturePad,
                clearButton,
                $element = $(componentInfo.element),
                imageUrl = params.imageUrl ? params.imageUrl : ko.observable(),
                json = params.json ? params.json : ko.observable(),
                variableBorder = params.variableBorder ? params.variableBorder : ko.observable(1)
                ;

            var callbacks = {
                regenerateFromJson: function (data) {
                    signaturePad.fromData(data);
                },
                regenerateFromDataUrl: function (data) {
                    signaturePad.fromDataURL(data);
                }
            };

            if (params.context) {
                params.context(callbacks);
            }

            return {
                init: function () {
                    console.log('signature-pad-v2 started', $element);
                    canvas = $element.find("canvas").get(0);
                    signaturePad = new SignaturePad(canvas,
                        {
                            minWidth: 1,
                            maxWidth: 2,
                            penColor: "rgb(51,97,155)",
                            backgroundColor: "rgb(255,255,255)",
                            onEnd: function () {
                                json(signaturePad.toData());
                                imageUrl(signaturePad.toDataURL());
                            }
                        });

                    document.getElementById("signature-pad-v2").style.border = ko.unwrap(variableBorder) + "px solid #c0c0c0";

                    clearButton = $element.find(".clearButton a");

                    clearButton.bind("click", function (evt) {
                        evt.preventDefault();
                        signaturePad.clear();                           
                        return true;
                    });

                    if (imageUrl()) {
                        signaturePad.fromDataURL(imageUrl());
                    }
                    else {
                        if (json()) {
                            signaturePad.fromData(json());
                        }
                    }

                    if (params.context) {
                        params.context(callbacks);
                    }

                }
            };

        }
    }
};

});

Когда пользователь ставит свою подпись на мобильном устройстве, фокус не удаляется из текстовых полей, и клавиатура всплывает, как только он отпускает палец. Немного досадных неудобств.

Answer 1

Без полного примера трудно сказать, в чем проблема, но поскольку вы используете jQuery, попробуйте размыть активный элемент следующим образом:

$('canvas').on('mousedown', function (e) {
    document.activeElement.blur();
});

Кроме того, если он не работаетпопробуйте отключить действие по умолчанию, добавив e.preventDefault();

Answer 2

Я считаю, что для удаления фокуса с элемента необходимо, чтобы другой элемент сфокусировался. Вы пытались сделать компонент «фокусируемым»?

Попробуйте добавить атрибут tabindex = "0" в ваш signature-pad-v2 или в подэлемент, сгенерированный вашим компонентом.