גזירה והעתקה של פקודות

IE10 ומעלה הוסיף תמיכה ב-'cut' או 'העתקה'. פקודות באמצעות Document.execCommand() . החל מגרסה 43 של Chrome, הפקודות האלה נתמכות גם ב-Chrome.

כל טקסט שנבחר בדפדפן כשאחת מהפקודות האלה מבוצעת נגזרו או הועתקו ללוח העריכה של המשתמש. זה מאפשר לך להציע למשתמש דרך פשוטה, כדי לבחור חלק מהטקסט ולהעתיק אותו ללוח.

האפשרות הזו שימושית במיוחד כשמשלבים אותה עם Selection API, לבחור טקסט באופן פרוגרמטי כדי לקבוע מה יועתק ללוח, נבחן זאת לעומק בהמשך מאמר זה.

דוגמה פשוטה

לדוגמה, נוסיף לחצן שמעתיק כתובת אימייל הלוח של המשתמש.

אנחנו מוסיפים את כתובת האימייל ל-HTML באמצעות לחצן כדי ליזום את ההעתקה אחרי שלוחצים עליה:

<p>Email me at <a class="js-emaillink" href="mailto:matt@example.co.uk">matt@example.co.uk</a></p>

<p><button class="js-emailcopybtn"><img src="./images/copy-icon.png" /></button></p>

לאחר מכן, ב-JavaScript, אנחנו רוצים להוסיף גורם שמטפל באירועים של קליקים ללחצן שלנו שאנחנו בוחרים את הטקסט של כתובת האימייל מהעוגן js-emaillink, מריצים עותק כך שכתובת האימייל תהיה בלוח העריכה של המשתמש, לבטל את הבחירה בכתובת האימייל כדי שהמשתמש לא יראה את הבחירה.

var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
    // Select the email link anchor text
    var emailLink = document.querySelector('.js-emaillink');
    var range = document.createRange();
    range.selectNode(emailLink);
    window.getSelection().addRange(range);

    try {
    // Now that we've selected the anchor text, execute the copy command
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy email command was ' + msg);
    } catch(err) {
    console.log('Oops, unable to copy');
    }

    // Remove the selections - NOTE: Should use
    // removeRange(range) when it is supported
    window.getSelection().removeAllRanges();
});

המטרה שלנו היא להשתמש בשיטה של Selection API, window.getSelection() להגדיר באופן פרוגרמטי את 'בחירה' של טקסט לעוגן, שזה הטקסט שאנחנו שרוצים להעתיק אל הלוח של המשתמש. אחרי הקריאה ל-document.execCommand() , יכול להסיר את הבחירה באמצעות window.getSelection().removeAllRanges(). אם רוצים לוודא שהכול עבד כמו שצריך, אפשר לבדוק תגובה של document.execCommand(); פונקציה זו מחזירה את הערך False אם הפקודה לא או מופעל. אנחנו אורזים את execCommand() לנסות וללכוד מאז ה-'cut' או 'העתקה'. פקודות יכולות לגרום לשגיאה בכמה תרחישים.

ה'חיתוך' אפשר להשתמש בפקודה לשדות טקסט שבהם רוצים להסיר את הטקסט תוכן ולהנגיש אותו באמצעות הלוח.

באמצעות אזור טקסט (textarea) ולחצן ב-HTML שלנו:

<p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p>

<p><button class="js-textareacutbtn" disable>Cut Textarea</button></p>

אנחנו יכולים לבצע את הפעולות הבאות כדי לחתוך את התוכן:

var cutTextareaBtn = document.querySelector('.js-textareacutbtn');

cutTextareaBtn.addEventListener('click', function(event) {
    var cutTextarea = document.querySelector('.js-cuttextarea');
    cutTextarea.select();

    try {
    var successful = document.execCommand('cut');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Cutting text command was ' + msg);
    } catch(err) {
    console.log('Oops, unable to cut');
    }
});

queryCommandSupported וגם queryCommandEnabled

לפני הקריאה ל-document.execCommand(), צריך לוודא שה-API הזה שנתמך באמצעות הפונקציה document.queryCommandSupported() . בדוגמה שלמעלה אנו יכולים להגדיר את הלחצן 'מושבת' בהתבסס על למשל:

copyEmailBtn.disabled = !document.queryCommandSupported('copy');

ההבדל בין document.queryCommandSupported() וגם document.queryCommandEnabled() הוא שדפדפן יכול לתמוך בחיתוך ובהעתקה, אבל אם לא נבחר כרגע טקסט, הן לא יופעלו. האפשרות הזו שימושית במקרים שבהם אין להגדיר את בחירת הטקסט באופן פרוגרמטי ורוצים לוודא שהפקודה יפעל כמצופה, אחרת יציג הודעה למשתמש.

תמיכה בדפדפן

IE 10 ומעלה, Chrome 43 ומעלה, Firefox 41 ומעלה ו-Opera 29 ומעלה תומכים בפקודות האלה.

Safari לא תומך בפקודות האלה.

באגים ידועים

• קריאה ל-queryCommandSupported() מ-devtools תמיד תחזיר את הערך false.
• בשלב הזה, החיתוך פועל רק אם בוחרים טקסט באופן פרוגרמטי.