WebMix

欄位文字複製

表單當中的欄位,例如一般文字框、多行文字框等,我們可以使用 JavaScript 當中的複製功能,將欄位裡的文字選取後,進行複製,就可以在其它地方使用 Cmd + v (或 Ctrl + v) 來貼上。

結果預覽

範例 1:點擊按鈕進行複製

複製成功

範例 2:點擊文字框進行複製

複製成功

提供 jQuery 原始碼

// 範例 1 的複製功能
$("button.btn_copy").on("click", function(){
  if(($("input.copy_text").val()).trim() != ""){
    
    $("input.copy_text").select(); // 文字框選取文字
    document.execCommand("copy");  // 執行複製功能

    $("span.hint").addClass("-on");
    setTimeout(function(){
      $("span.hint").removeClass("-on");
    }, 1000);
  }
});

// 範例 2 的複製功能
$("textarea.copy_textarea").on("focus", function(){
  if(($(this).val()).trim() != ""){

    $(this).select();             // 文字框選取文字
    document.execCommand("copy"); // 執行複製功能

    $("span.hint_for_textarea").addClass("-on");
    setTimeout(function(){
      $("span.hint_for_textarea").removeClass("-on");
    }, 1000);
  }
});