【问题标题】:Make clipboard copy-paste work on iphone devices使剪贴板复制粘贴在 iPhone 设备上工作
【发布时间】:2019-07-03 16:48:47
【问题描述】:

我有一个网络应用程序,它主要设计用于在移动设备上运行。我有一个按钮,它会将传递的文本复制到设备剪贴板。我为此使用了javascript。我的代码在所有移动设备上运行良好,除了 iphone 和 ipad。 任何人都知道可能是什么问题? 这是我的代码:

CopyToClipboard = function(text, fallback){
    var $t = $('<textarea />');
    $t.val(text).appendTo('body');
    $t.select();
    document.execCommand('copy');
    $t.remove();
    return true;   
};

我也尝试过这种方式,但没有结果,仍然无法在iphone上工作

function detectIE() {
    var ua = window.navigator.userAgent;

    var msie = ua.indexOf('MSIE ');
    if (msie > 0) {
        // IE 10 or older => return version number
        return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
    }

    var trident = ua.indexOf('Trident/');
    if (trident > 0) {
        // IE 11 => return version number
        var rv = ua.indexOf('rv:');
        return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
    }

    var edge = ua.indexOf('Edge/');
    if (edge > 0) {
        // IE 12 => return version number
        return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
    }

    // other browser
    return false;
}
function copytext(text) {
    if (detectIE()) {
        window.clipboardData.setData('Text', text);
    }
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    window.clipboardData.setData('Text', copytext);
    textField.remove();
}

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    $(textField).remove();
}

【问题讨论】:

  • @MFazio23 我已经看到了,那里的解决方案也不起作用。我不想真正使用 ZeroClipboard,因为据我了解,它正在使用 flash。
  • 我认为没有已知的方法可以让任何复制到剪贴板在 iOS Safari 中工作——甚至在桌面 Safari 中也没有,而无需用户在您的代码自动选择内容后手动键入 ⌘-C你希望他们复制。但对于未来,bugs.webkit.org/show_bug.cgi?id=146336 存在一个开放功能错误,用于在 Safari 中实现 execCommand("copy")

标签: javascript jquery html iphone clipboard


【解决方案1】:

试试这个。对我有用。

var copy = function(elementId) {

	var input = document.getElementById(elementId);
	var isiOSDevice = navigator.userAgent.match(/ipad|iphone/i);

	if (isiOSDevice) {
	  
		var editable = input.contentEditable;
		var readOnly = input.readOnly;

		input.contentEditable = true;
		input.readOnly = false;

		var range = document.createRange();
		range.selectNodeContents(input);

		var selection = window.getSelection();
		selection.removeAllRanges();
		selection.addRange(range);

		input.setSelectionRange(0, 999999);
		input.contentEditable = editable;
		input.readOnly = readOnly;

	} else {
	 	input.select();
	}

	document.execCommand('copy');
}
<input type="text" id="foo" value="text to copy" />
<button onclick="copy('foo')">Copy text</button>

【讨论】:

  • 这是直接复制的绝佳替代品,请注意,这将选择文本,然后显示标准的 iOS Copy|Look Up|Share... 按钮,这对我的用例非常有用,谢谢: o)
【解决方案2】:

根据CanIUse,iOS 上的 Safari 不支持document.execCommand('copy'),可能是出于安全原因。

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-09-08
  • 1970-01-01
  • 1970-01-01
  • 2010-12-10
  • 2018-11-24
  • 1970-01-01
相关资源
最近更新 更多