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

Matt Gaunt

ב-IE10 ואילך נוספה תמיכה בפקודות 'חיתוך' ו 'העתקה' באמצעות השיטה 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(), כדי להגדיר באופן פרוגרמטי את 'הבחירה' של הטקסט למפרק, שהוא הטקסט שאנחנו רוצים להעתיק ללוח של המשתמש. אחרי שמפעילים את 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.
• בשלב הזה, האפשרות 'חיתוך' פועלת רק כשבוחרים טקסט באופן פרוגרמטי.