“This is the third day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

preface

Today, let’s talk about a small need:

Product: say give me this to add a copy function, click to copy the content for me to paste board.

I: ok

I: say top go up, 5 minutes fix, deploy go up to see, deliciousness, another day

Five minutes passed…

Test: The test passed. That’s it

Product: copy tips successfully, but not on the paste board!!

Me and the test: blinded, how will

Product: Mine is an Apple computer

Me and the test: Damn, the product is so expensive? I didn’t think about bugs, I just thought about my stupid computer…

I: no way, can only see what problem…

I: 5 minutes later, I found that the select() method of: input cannot be selected on the apple side.

.

Take a look at the code I CV out in 5 minutes

All browsers in Windows work normally, no problem

However, the most afraid but, ios is not normal

/ / click copy to clipboard function copyToClipboard (content) {if (window. ClipboardData) {window. ClipboardData. SetData (' text ', content) } else { (function(content) { document.oncopy = function(e) { e.clipboardData.setData('text', content) e.preventDefault() document.oncopy = null } })(content) document.execCommand('Copy') }Copy the code
  • ExecCommand (‘copy’) execCommand execCommand(‘copy’)

    On an ios devicealert(document.execCommand('copy'))Always returnsfalse

    Input is not supported in iosinput.select();
  • Other compatibility issues:

    The input field cannothiddenordisplay: none; If you need to hide the input field you can use positioning to detach from the document flow and then remove the screen

The input select() method cannot be selected on the MAC

Just go to the full code and it looks easier

CopyText (text) {const textString = text.toString() // number cannot be executed without.length selectText needs to be converted to a string let input = document.querySelector('#copy-input') if (! Id = 'copy-input' input.readOnly = 'readOnly' // Prevents ios focus from triggering keyboard events input.style.position = 'absolute' input.style.left = '-2000px' input.style.zIndex = '-2000' Document. The body. The appendChild (input)}. The input value = textString / / ios must first be selected text and does not support the input. The select (); this.selectText(input, 0, Textstring.length) if (document.execcommand ('copy')) {document.execcommand ('copy') this.$message. Success ('copy succeeded! ')} else {this.$message.success(' Copy failed! ') } input.blur() }Copy the code

Input has its own select() method

Input’s select() method is not selectable on the Apple side, so you’ll need to write a similar method yourself

// Select the text. SelectText (TextBox, startIndex, stopIndex) { if (textbox.createTextRange) { // ie const range = textbox.createTextRange() range.collapse(true) Range.movestart ('character', startIndex) // Start cursor range.moveEnd('character', StopIndex - end startIndex) / / the cursor range. The select () / / is not compatible with apple} else {/ / firefox/chrome textbox. SetSelectionRange (startIndex,  stopIndex) textbox.focus() } }Copy the code

Compatibility supplement:

Click events or other events must be triggered manually, not directly using JS calls!! CopyText (‘ H5 implements one click copy to paste board compatible with ios’)

  • Mobile client:

    Android: wechat (Chrome) and several mobile browsers work;

    IPhone: iT works in wechat and sarafi browser.

  • PC:

    Sarafi must be at least 10.2, other browsers can.

conclusion

1. Don’t panic! Holes are filled in step by step, do not have not done as a reason, make a change, this is experience, although it is not a big problem on the surface, but careful is always good; When doing things, we need to take everything into consideration. Don’t let the “so-called small things” be ignored, for if there are too many small things, the nature will be different. Be careful, careful, careful. Say three important things.