我的应用程序中有一个小的确认窗口,用户必须在其中输入姓名和信息,然后签名。我的问题是,当用户输入姓名时,应用程序的焦点不会在有人使用签名板的那一刻消失。使得虚拟键盘在用户从触摸屏释放他们的手指的时刻弹出。这种焦点问题似乎只发生在移动的设备上,在安卓和苹果设备上都会发生。
我试过使用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> </div>
<div> </div>
<div> </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);
}
}
};
}
}
};
});
当用户在移动的设备上签名时,焦点不会从文本字段中移走,一旦他们松开手指,键盘就会弹出。这是一个恼人的小麻烦。
3条答案
按热度按时间ruyhziif1#
我相信要移除一个元素的焦点,必须让另一个元素取得焦点。您尝试过让元件成为“可聚焦的”吗?
尝试将属性tabindex=“0”添加到signature-pad-v2,或添加到组件生成的子元素。
qij5mzcb2#
如果没有完整的示例,很难说出问题出在哪里,但由于您使用的是jQuery,请尝试模糊活动元素,如下所示:
此外,如果它不起作用,请尝试通过添加
e.preventDefault();
来禁用默认操作rslzwgfq3#
只是模糊活动元素,即隐藏键盘。香草js解决方案。