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

Matt Gaunt

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

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

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

דוגמה פשוטה

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

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

<p>Email me at <a class="js-emaillink" href="mailto:[e-mail]">[e-mail]</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() כדי להגדיר באופן פרוגרמטי את 'selection' של הטקסט לעוגן, שהוא הטקסט שאנחנו רוצים להעתיק ללוח של המשתמש. אחרי שמפעילים את document.execCommand(), אפשר להסיר את הבחירה על ידי קריאה ל-window.getSelection().removeAllRanges(). כדי לוודא שהכול פועל כצפוי, אפשר לבדוק את התגובה של document.execCommand(); הפונקציה מחזירה את הערך false אם הפקודה לא נתמכת או לא מופעלת. אנחנו עוטפים את execCommand() ב-try and catch כי הפקודות 'חיתוך' ו'העתקה' יכולות להוביל לשגיאה בכמה תרחישים.

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

באמצעות 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 הזה נתמך באמצעות ה-method‏ document.queryCommandSupported()‎. בדוגמה שלמעלה, אנו יכולים להגדיר את הלחצן מושבת בהתאם לתמיכה כמו:

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

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

תמיכה בדפדפן

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

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

באגים ידועים

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