在iPhone设备上制作剪贴板复制粘贴工作 [英] Make clipboard copy-paste work on iphone devices

问题描述

我有Web应用程序，主要用于在移动设备上运行。我有一个按钮，它将复制到设备剪贴板传递的文本。我为此使用JavaScript。我的代码在所有移动设备上运行良好，除了iphone和ipad。
任何人都知道可能是什么问题？
这里是我的代码：
$ b $ pre $ CopyToClipboard = function（text，fallback）{
var $ t = $（'< textarea />'）;
$ t.val（text）.appendTo（'body'）;
$ t.select（）;
document.execCommand（'copy'）;
$ t.remove（）;
返回true;
};


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

  function detectIE（）{
 var ua = window.navigator.userAgent; 
 
 var msie = ua.indexOf（'MSIE'）; 
 if（msie> 0）{
 // IE 10或更旧版本=>返回版本号
返回parseInt（ua.substring（msie + 5，ua.indexOf（'。'，msie）），10）; 
} 
 
 var trident = ua.indexOf（'Trident /'）; 
 if（trident> 0）{
 // IE 11 =>返回版本号
 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 =>返回版本号
返回parseInt（ua.substring（edge + 5，ua.indexOf（'。'，edge）），10）; 
} 
 
 //其他浏览器
 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（）; 
 
 
函数copytext（text）{
 var textField = document.createElement（'textarea'）; 
 textField.innerText = text; 
 document.body.appendChild（textField）; 
 textField.select（）; 
 document.execCommand（'copy'）; 
 $（textField）.remove（）; 
} 
  

解决方案

试试这个。适用于我。

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（输入）; var selection = window.getSelection（）; selection.removeAllRanges（）; selection.addRange（范围）; input.setSelectionRange（0，999999）; input.contentEditable = editable; input.readOnly = readOnly; } else {input.select（）; } document.execCommand（'copy'）;}

< ; input type =textid =foovalue =text to copy/>< button onclick =copy（'foo'）>复制文本< / button>

I have web application, which is mostly designed to be run on mobile devices. I have one button, which will copy to device clipboard the passed text. I am using javascript for that. My code is working great on all mobile devices, except for iphone and ipad. Anybody knows what can be the problem? Here is my code:

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

I have also tried to go this way, but no result, still not working on 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();
}

解决方案

Try this. Works for me.

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>

这篇关于在iPhone设备上制作剪贴板复制粘贴工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！