如何防止手持设备在使用画布签名板时打开键盘？

Question

我的应用中有一个小确认窗口，用户必须在其中输入姓名和消息，然后输入他们的签名。我的问题是，当用户输入名称时，应用程序的焦点不会在有人使用签名板的那一刻消失，从而导致虚拟键盘在用户从触摸屏上松开手指的那一刻起弹出。这个焦点问题似乎只发生在移动设备上，并且在安卓和苹果设备上都会发生。

我尝试过使用 JQuery 和 Javascript，甚至是诸如 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"
], function (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

我相信要从一个元素中移除焦点，就必须让另一个元素获得焦点。您是否尝试过使组件“可聚焦”？

尝试将属性 tabindex="0" 添加到您的 signature-pad-v2 或组件生成的子元素中。

Answer 2

如果没有完整的示例，很难说问题出在哪里，但是由于您使用的是 jQuery，请尝试如下模糊活动元素：

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

另外，如果不起作用，请尝试通过添加e.preventDefault();来禁用默认操作

Answer 3

<canvas inputMode="none" onTouchStart={() => {
if (document.activeElement && document.activeElement.blur) {
    document.activeElement.blur();
}
    }}
     />

只是模糊活动元素，隐藏键盘。 Vanilla js 解决方案。