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

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() בניסיון 'תופס', כי הפקודות 'cut' ו-'copy' יכולות לגרום לשגיאה במספר תרחישים.

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

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