当你 select [CSS, JS, android] 时阻止标准动作

Question

我在 android webview 中制作了一个应用程序，我希望可以复制某些内容。因此，当您按下按钮时，您会将某些内容复制到剪贴板。我试过 "clipboard.js" 可以使用浏览器，但不能在 android 上使用。所以我用了这个 javascript:

var copyXBT = function () {
var theTheCopyXBTAdr = $('#theToCopyXBT');
theTheCopyXBTAdr.select();
try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
} catch (err) {
    console.log('Oops, unable to copy');
}

};

但是当您按下输入类型时，文本会变成蓝色，..和蓝色边框（android webview 黄色）并且 android 您的键盘会弹出。

我用这个 css 样式来 "hide" 它。因为我不能说display none。如果我这样做，我将无法工作。

#theToCopyETH{
color: white;
border: 0px solid white;
}

::selection{
    background: white;
    color: white;
}

这是我的HTML:

<button class="btn btn-coinchecker" id="copyETH">Copy ETH address</button><button class="btn btn-coinchecker" data-toggle="modal" data-target="#showETHQR">Click me to get the QR-code</button>
        <input type="text" id="theToCopyETH" value="*********************">

见fiddle示例（请在GoogleChrome中打开）

所以我的问题是如何防止键盘弹出并去掉 android 中的黄色边框（google chrome 在桌面上是蓝色的）

在此先感谢您对我的帮助！

Answer 1

这应该足以隐藏输入并在输入 clicked/tapped 时阻止任何 activity，但不会破坏您的 JS：

#theToCopyETH {
  visibility: hidden;
  pointer-events: none;
}

Answer 2

我找到了答案。

我需要做什么来隐藏我的键盘是这个js:

enter var hidekeyboard = function (e) {
    e.attr('readonly', 'readonly'); // Force keyboard to hide on input field.
    e.attr('disabled', 'true'); // Force keyboard to hide on textarea field.
    setTimeout(function() {
        e.blur();  //actually close the keyboard
        // Remove readonly attribute after keyboard is hidden.
        e.removeAttr('readonly');
        e.removeAttr('disabled');
    }, 100)
};

我需要在我的选择发生后添加，否则我将无法工作。我的 copyETH 看起来像这样：

var copyETH = function () {
var theTheCopyETHAdr = $('#theToCopyETH');
theTheCopyETHAdr.removeClass('toggleDisplay');
theTheCopyETHAdr.select();
try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
} catch (err) {
    console.log('Oops, unable to copy');
}
hidekeyboard(theTheCopyETHAdr);
theTheCopyETHAdr.addClass('toggleDisplay');
};

所以你可以看到我还做了一个 removeClass 和 addClass。因为如果我只使用 hidekeyboard 你可以看到选择但是他的 css class 它消失了 + 没有人可以更改输入字段。

这里看到解决了fiddle

当你 select [CSS, JS, android] 时阻止标准动作

Prevent standard action when you select [CSS, JS, android]

html

css

jquery

android

android-webview