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

4si2a6ki  于 2022-11-10  发布在  其他
关注(0)|答案(3)|浏览(141)

我的应用程序中有一个小的确认窗口,用户必须在其中输入姓名和信息,然后签名。我的问题是,当用户输入姓名时,应用程序的焦点不会在有人使用签名板的那一刻消失。使得虚拟键盘在用户从触摸屏释放他们的手指的时刻弹出。这种焦点问题似乎只发生在移动的设备上,在安卓和苹果设备上都会发生。
我试过使用JQuery和Javascript,甚至像focus.blur和.focus()这样的Knockout解决方案,但似乎都不起作用。就像在移动的设备上点击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);
                        }

                    }
                };

            }
        }
    };

});

当用户在移动的设备上签名时,焦点不会从文本字段中移走,一旦他们松开手指,键盘就会弹出。这是一个恼人的小麻烦。

ruyhziif

ruyhziif1#

我相信要移除一个元素的焦点,必须让另一个元素取得焦点。您尝试过让元件成为“可聚焦的”吗?
尝试将属性tabindex=“0”添加到signature-pad-v2,或添加到组件生成的子元素。

qij5mzcb

qij5mzcb2#

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

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

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

rslzwgfq

rslzwgfq3#

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

只是模糊活动元素,即隐藏键盘。香草js解决方案。

相关问题