整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
作者：JavaScript前端（梓超） 注：此文章為頭條號(hào)原創(chuàng)，特此聲明！
一、原理分析
瀏覽器提供了 copy 命令 ，可以復(fù)制選中的內(nèi)容
document.execCommand("copy")
如果是輸入框，可以通過 select() 方法，選中輸入框的文本，然后調(diào)用 copy 命令，將文本復(fù)制到剪切板
但是 select() 方法只對 <input> 和 <textarea> 有效，對于 <p> 就不好使
最后我的解決方案是，在頁面中添加一個(gè) <textarea>，然后把它隱藏掉
點(diǎn)擊按鈕的時(shí)候，先把 <textarea> 的 value 改為 <p> 的 innerText，然后復(fù)制 <textarea> 中的內(nèi)容
二、代碼實(shí)現(xiàn)
HTML 部分
按 Ctrl+C 復(fù)制代碼
按 Ctrl+C 復(fù)制代碼
JS 部分
<script type="text/javascript">
function copyText() {
var text = document.getElementById("text").innerText;
var input = document.getElementById("input");
input.value = text; // 修改文本框的內(nèi)容
input.select(); // 選中文本
document.execCommand("copy"); // 執(zhí)行瀏覽器復(fù)制命令
alert("復(fù)制成功");
}
</script>
親測，F(xiàn)irefox 48.0，Chrome 60.0，IE 8 都能用
推薦閱讀：
最好的JavaScript數(shù)據(jù)可視化庫都在這里了
js 中原型和原型鏈深入理解
JavaScript基礎(chǔ)知識(shí)系列：不再彷徨：完全弄懂JavaScript中的this
最好的JavaScript數(shù)據(jù)可視化庫都在這里了
JavaScript基礎(chǔ)知識(shí)系列：判斷類型（上）
HTML是用來開發(fā)網(wǎng)頁的，它是開發(fā)網(wǎng)頁的語言
全稱HyperText Mark-up Language，超文本標(biāo)記語言
標(biāo)記就是標(biāo)簽
<標(biāo)簽名稱></標(biāo)簽名稱> 比如 <html></html> <h1></h1>等，標(biāo)簽大多數(shù)都是成對出現(xiàn)的。
超文本 兩層含義：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
網(wǎng)頁顯示內(nèi)容
</body>
</html>第一行<!DOCTYPE html>是文檔聲明
用來指定頁面所使用的html的版本, 這里聲明的是一個(gè)html5的文檔
<html>...</html>標(biāo)簽是開發(fā)人員在告訴瀏覽器
整個(gè)網(wǎng)頁是從<html>這里開始的，到</html>結(jié)束
也就是html文檔的開始和結(jié)束標(biāo)簽
<head>...</head>標(biāo)簽用于定義文檔的頭部
是負(fù)責(zé)對網(wǎng)頁進(jìn)行設(shè)置標(biāo)題、編碼格式以及引入css和js文件的
<body>...</body>標(biāo)簽是編寫網(wǎng)頁上顯示的內(nèi)容
網(wǎng)頁文件的后綴是.html, 一個(gè)html文件就是一個(gè)網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁
VS Code全拼是 Visual Studio Code 是由微軟研發(fā)的一款免費(fèi)、開源的跨平臺(tái)代碼編輯器
目前是前端(網(wǎng)頁)開發(fā)使用最多的一款軟件開發(fā)工具
下載網(wǎng)址: https://code.visualstudio.com/Download
選擇對應(yīng)的安裝包進(jìn)行下載:
安裝一切默認(rèn)
1 標(biāo)簽不區(qū)分大小寫，但是推薦使用小寫
2 根據(jù)標(biāo)簽的書寫形式，標(biāo)簽分為雙標(biāo)簽(閉合標(biāo)簽)和單標(biāo)簽(空標(biāo)簽) 2.1 雙標(biāo)簽是指由開始標(biāo)簽和結(jié)束標(biāo)簽組成的一對標(biāo)簽，這種標(biāo)簽允許嵌套和承載內(nèi)容，比如: div標(biāo)簽 2.2 單標(biāo)簽是一個(gè)標(biāo)簽組成，沒有標(biāo)簽內(nèi)容， 比如: img標(biāo)簽
標(biāo)簽的使用形式
列表標(biāo)簽
網(wǎng)頁效果
表格標(biāo)簽
<table>標(biāo)簽：表示一個(gè)表格
<tr>標(biāo)簽：表示表格中的一行
<td>標(biāo)簽：表示表格中的列
<th>標(biāo)簽：表示表格中的表頭
屬性設(shè)置
border: 1px solid black:設(shè)置邊框和顏色
border-collapse: collapse:設(shè)置邊框合并
網(wǎng)頁效果
表單標(biāo)簽
表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器
<form>標(biāo)簽 表示表單標(biāo)簽，定義整體的表單區(qū)域
一個(gè)表單中有很多信息組成,比如 姓名,愛好,地址等,這些內(nèi)容有很多其他標(biāo)簽來承載
這些標(biāo)簽稱為表單元素標(biāo)簽
網(wǎng)頁效果
表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器
兩種方式的區(qū)別:
表單元素屬性設(shè)置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
姓名 type="text" 定義單行文本輸入框
密碼 type="password" 定義密碼輸入框
性別 type="radio" 定義單選框
愛好 type="checkbox" 定義復(fù)選框
照片 type="file" 定義上傳文件
個(gè)人描述 <textarea></textarea> 定義多行文本輸入框
地址 <select></select> 定義下拉列表
提交 type="submit" 定義提交按鈕
重置 type="reset" 定義重置按鈕
按鈕 type="button" 定義一個(gè)普通按鈕
-->
<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<label>性別:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>愛好:</label>
<input type="checkbox" name="like" value="睡覺">睡覺
<input type="checkbox" name="like" value="吃飯">吃飯
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>個(gè)人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</form>
</body>
</html>
點(diǎn)擊提交：
可以看到服務(wù)器收到了請求報(bào)文。
一篇文章Stimulus：連接HTML和JavaScript的橋梁，實(shí)現(xiàn)簡單的controller，并學(xué)習(xí)了Stimulus是如何連接HTML與JavaScript的?，F(xiàn)在我們使用Stimulus來實(shí)現(xiàn)復(fù)制文本到粘貼板的按鈕。
比如說，我們現(xiàn)在有一個(gè)需求，就是幫助用戶生成密碼，在密碼旁邊放置一個(gè)按鈕，點(diǎn)擊按鈕后密碼就被拷貝到粘貼板上了，這樣就方便用戶使用這個(gè)密碼了。
打開public/index.html，修改body內(nèi)容，填充一個(gè)簡單的按鈕，如下：
<div>
PIN: <input type="text" value="1234" readonly>
<button>Copy to Clipboard</button>
</div>下一步，創(chuàng)建src/controllers/clipboard_controller.js，然后添加一個(gè)copy()方法：
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
copy() {
}
}然后，給div添加data-controller=“clipboard”。只要是給元素添加了data-controller屬性，Stimulus就會(huì)連接一個(gè)controller實(shí)例。
<div data-controller="clipboard">我們還需要一個(gè)對輸入框的引用，這樣我們就可以在調(diào)用粘貼板API之前獲取輸入框的內(nèi)容。給文本框添加data-clipboard-target=“source“：
PIN: <input data-clipboard-target="source" type="text" value="1234" readonly>在controller中定義一個(gè)target，然后就可以通過this.sourceTarget訪問文本框了。
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = [ "source" ]
copy() {
}
}解釋一下這個(gè)targets：
當(dāng)Stimulus加載你的controller類時(shí)，它會(huì)查看靜態(tài)數(shù)組targets的字符串元素，對于每一個(gè)字符串，Stimulus會(huì)在controller中添加3個(gè)屬性。在這里，對于“source”，會(huì)添加如下屬性：
this.sourceTarget 在controller的域內(nèi)的第一個(gè)source
this.sourceTargets 在controller的域內(nèi)所有的source組成的一個(gè)數(shù)組
this.hasSourceTarget 在controller的域內(nèi)是否有source
我們希望點(diǎn)擊按鈕時(shí)調(diào)用controller中的copy()方法，所以我們需要添加data-action=“clipboard#copy“
<button data-action="clipboard#copy">Copy to Clipboard</button>你可以已經(jīng)注意到在上面的動(dòng)作描述符中省略了click->。那是因?yàn)镾timulus給button設(shè)置了click作為它默認(rèn)的事件。
某些其他元素也有默認(rèn)事件。下面是個(gè)全部列表：
元素 | 默認(rèn)事件 |
a | click |
button | click |
details | toggle |
form | submit |
input | input |
input type=“submit” | click |
select | change |
textarea | input |
最終，在copy()方法中，我們獲取輸入框的內(nèi)容，調(diào)用粘貼板API
copy() {
navigator.clipboard.writeText(this.sourceTarget.value)
}刷新頁面，點(diǎn)擊按鈕，然后快捷鍵粘貼到Greet按鈕前到輸入框，可以看到1234。
到目前為止，在頁面上同一時(shí)間只有一個(gè)controller實(shí)例。在頁面上同時(shí)有一個(gè)controller的多個(gè)實(shí)例也是很正常的。
我們的controller是可以復(fù)用的，只要你需要在頁面上添加復(fù)制內(nèi)容的按鈕，無論是哪個(gè)頁面，只要把對應(yīng)的屬性值寫好，我們的controller都是生效的。
還是上面的例子，再添加另外一個(gè)復(fù)制按鈕：
<div data-controller="clipboard">
PIN: <input data-clipboard-target="source" type="text" value="3737" readonly>
<button data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</button>
</div>刷新頁面，驗(yàn)證一下兩個(gè)復(fù)制按鈕是否都生效。
我們再添加一個(gè)可以復(fù)制的元素，不用button，我們用a標(biāo)簽，
<div data-controller="clipboard">
PIN: <input data-clipboard-target="source" type="text" value="6666" readonly>
<a href="#" data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</a>
</div>Stimulus允許我們使用任何元素，只要它設(shè)置了合適的data-action屬性，就可以觸發(fā)復(fù)制。
這個(gè)例子里，要注意一點(diǎn)，點(diǎn)擊鏈接會(huì)使瀏覽器追蹤a標(biāo)簽內(nèi)的href屬性跳轉(zhuǎn)，可以取消這種默認(rèn)行為，只需要在action中調(diào)用 event.preventDefault()就可以了。
copy(event) {
event.preventDefault()
navigator.clipboard.writeText(this.sourceTarget.value)
}還有另外一個(gè)方法，拷貝粘貼板上
copy(event) {
event.preventDefault()
this.sourceTarget.select()
document.execCommand("copy")
}在本文中，我們看了一個(gè)在現(xiàn)實(shí)中把瀏覽器API包裝在Stimulus的controller中的例子。還有一個(gè)controller的多個(gè)實(shí)例如何同時(shí)出現(xiàn)在頁面上，我們還探索了actions和targets如何保持HTML和JavaScript的松散耦合。
下一篇文章，我們將優(yōu)化一下這個(gè)復(fù)制粘貼板的功能，讓它運(yùn)行起來更加健壯。
Stimulus：瀏覽器不支持復(fù)制或者弱網(wǎng)條件下，怎么辦？
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
