JS短文：如何使用 JS 將文本以純文本形式粘貼到可編輯內(nèi)容元素中？

載說明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載

有時(shí)候，我們希望使用 JavaScript 將文本以純文本形式粘貼到可編輯內(nèi)容元素中。

在本文中，我們將討論如何使用 JavaScript 將文本以純文本形式粘貼到可編輯內(nèi)容元素中。

使用JavaScript將文本粘貼為純文本到可編輯內(nèi)容元素中

我們可以通過監(jiān)聽粘貼事件并修改粘貼行為，將純文本粘貼到可編輯內(nèi)容元素中。

例如，如果我們有以下的 div 元素：

<div contenteditable>
</div>

然后，我們可以通過監(jiān)聽粘貼事件來修改粘貼行為：

// 獲取可編輯的 div 元素
const editor = document.querySelector('div');

// 監(jiān)聽粘貼事件
editor.addEventListener("paste", (e) => {
  e.preventDefault(); // 阻止默認(rèn)粘貼行為

  // 獲取粘貼的純文本內(nèi)容
  const text = e.clipboardData.getData('text/plain');

  // 將純文本插入到可編輯元素中
  document.execCommand("insertHTML", false, text);
});

當(dāng)你需要在可編輯的內(nèi)容元素中以純文本形式粘貼文本時(shí)，你可以使用上述代碼來實(shí)現(xiàn)。讓我逐步解釋每一部分的作用：

1. 首先，我們通過 `document.querySelector('div')` 獲取到一個(gè)可編輯的 `<div>` 元素，這個(gè)元素將用于粘貼操作。

2. 然后，我們使用 `editor.addEventListener("paste", (e) => { ... });` 添加一個(gè)粘貼事件監(jiān)聽器。這意味著當(dāng)用戶嘗試粘貼內(nèi)容時(shí)，我們將執(zhí)行指定的操作。

3. 在事件監(jiān)聽器的函數(shù)內(nèi)部，`e` 是代表事件對(duì)象的參數(shù)。我們使用 `e.preventDefault();` 來阻止瀏覽器默認(rèn)的粘貼行為，以便我們能夠自行處理粘貼操作。

4. `e.clipboardData.getData('text/plain')` 這行代碼用于從剪貼板中獲取純文本內(nèi)容。`e.clipboardData` 是一個(gè)包含剪貼板數(shù)據(jù)的對(duì)象，我們使用 `getData('text/plain')` 方法來獲取純文本數(shù)據(jù)。

5. 最后，我們使用 `document.execCommand("insertHTML", false, text);` 將獲取到的純文本內(nèi)容插入到可編輯元素中。`insertHTML` 是一個(gè)命令，它允許我們將指定的 HTML 或文本插入到文檔中。第三個(gè)參數(shù) `text` 是要插入的內(nèi)容。

綜合起來，當(dāng)用戶在可編輯元素中粘貼內(nèi)容時(shí)，粘貼事件會(huì)觸發(fā)。代碼阻止默認(rèn)的粘貼行為，然后從剪貼板中獲取純文本數(shù)據(jù)，并將它以純文本的形式插入到可編輯的 `<div>` 元素中，實(shí)現(xiàn)了將文本粘貼為純文本的效果。

結(jié)論

通過監(jiān)聽粘貼事件并修改粘貼行為，我們可以將純文本粘貼到可編輯內(nèi)容元素中。

由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請(qǐng)別忘了點(diǎn)贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時(shí)，如果您想獲取更多前端技術(shù)的知識(shí)，歡迎關(guān)注我，您的支持將是我分享最大的動(dòng)力。我會(huì)持續(xù)輸出更多內(nèi)容，敬請(qǐng)期待。

么是JS延遲加載？

JS延遲加載，也就是等頁面加載完成之后再加載JavaScript文件

為什么讓JS實(shí)現(xiàn)延遲加載？

js的延遲加載有助于提高頁面的加載速度。

Js延遲加載的方式有哪些？一般有以下幾種方式：

·defer屬性

·async屬性

·動(dòng)態(tài)創(chuàng)建DOM方式

·使用jQuery的getScript方法

·使用setTimeout延遲方法

·讓JS最后加載

1、defer屬性

HTML 4.01為<script>標(biāo)簽定義了defer屬性。標(biāo)簽定義了defer屬性元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行標(biāo)簽定義了defer屬性。

用途：表明腳本在執(zhí)行時(shí)不會(huì)影響頁面的構(gòu)造。也就是說，腳本會(huì)被延遲到整個(gè)頁面都解析完畢之后再執(zhí)行在<script>元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行

<!DOCTYPE html>
<html>
<head>
	<script src="test1.js" defer="defer"></script>
	<script src="test2.js" defer="defer"></script>
</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>

說明：雖然<script>元素放在了<head>元素中，但包含的腳本將延遲瀏覽器遇到</html>標(biāo)簽后再執(zhí)行HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行。在現(xiàn)實(shí)當(dāng)中，延遲腳本并不一定會(huì)按照順序執(zhí)行defer屬性只適用于外部腳本文件。支持HTML5的實(shí)現(xiàn)會(huì)忽略嵌入腳本設(shè)置的defer屬性

2、async屬性

HTML5 為<script>標(biāo)簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。標(biāo)簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。

目的：不讓頁面等待腳本下載和執(zhí)行，從而異步加載頁面其他內(nèi)容。異步腳本一定會(huì)在頁面 load 事件前執(zhí)行。不能保證腳本會(huì)按順序執(zhí)行

<!DOCTYPE html>
<html>
	<head>
		<script src="test1.js" async></script>
		<script src="test2.js" async></script>
	</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>

async和defer一樣，都不會(huì)阻塞其他資源下載，所以不會(huì)影響頁面的加載。

缺點(diǎn)：不能控制加載的順序

3、動(dòng)態(tài)創(chuàng)建DOM方式

//這些代碼應(yīng)被放置在</ body>標(biāo)簽前(接近HTML文件底部)
<script type="text/javascript">
	function downloadJSAtOnload() {
		varelement = document .createElement("script");
		element.src = "defer.js";
		document.body.appendChild(element);
	}
	if (window. addEventListener)
		window.addEventListener("load" ,downloadJSAtOnload, false);
	else if (window.attachEvent)
		window.attachEvent("onload", downloadJSAtOnload) ;
	else
		window. onload =downloadJSAtOnload;
</script>

4、使用jQuery的getScript()方法

$.getScript("outer.js" , function(){	//回調(diào)函數(shù)，成功獲取文件后執(zhí)行的函數(shù)
	console.log(“腳本加載完成")
});

5、使用setTimeout延遲方法的加載時(shí)間延遲加載js代碼，給網(wǎng)頁加載留出更多時(shí)間

<script type="text/javascript" >
	function A(){
		$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
			alert("Hello");
		});
	}
	$(function (){
		setTimeout('A()', 1000);	//延遲1秒
	})
</script>

6、讓JS最后加載

把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度例如引入外部js腳本文件時(shí)，如果放入html的head中,則頁面加載前該js腳本就會(huì)被加載入頁面，而放入body中，則會(huì)按照頁面從上倒下的加載順序來運(yùn)行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度。

上述方法2也會(huì)偶爾讓你收到Google頁面速度測(cè)試工具的“延遲加載javascript”警告。所以這里的解決方案將是來自Google幫助頁面的推薦方案。

//這些代碼應(yīng)被放置在</body>標(biāo)簽前(接近HTML文件底部)

<script type= "text/javascript">
	function downloadJSAtonload() {
		var element = document.createElement("script");
		element.src = "defer.js";
		document.body.appendChild(element);
	}
	if (window.addEventListener)
		window.addEventListener("load", downloadJSAtOnload, false);
	else if (window.attachEvent )
		window.attachEvent("onload", downloadJSAtonload);
	else window.onload = downloadJSAtOnload;
</script>

這段代碼意思等到整個(gè)文檔加載完后，再加載外部文件“defer.js”。

使用此段代碼的步驟：

6.1）復(fù)制上面代碼

6.2）粘貼代碼到HTML的標(biāo)簽前 (靠近HTML文件底部)

6.3）修改“defer.js”為你的外部JS文件名

6.4）確保文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。

注意：

這段代碼直到文檔加載完才會(huì)加載指定的外部js文件。因此，不應(yīng)該把那些頁面正常加載需要依賴的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁面需要而立即加載的javascript代碼，另外一組是在頁面加載后進(jìn)行操作的javascript代碼(例如添加click事件。

ext-decoration屬性介紹#

text-decoration屬性是用來設(shè)置文本修飾線呢，text-decoration屬性一共有4個(gè)值。

text-decoration屬性值說明表#

值作用none去掉文本修飾線underline設(shè)置下劃線overline設(shè)置上劃線line-through設(shè)置刪除線

HTML標(biāo)簽自帶修飾線#

在開始實(shí)踐text-decoration屬性之前，筆者先給大家普及下HTML中的標(biāo)簽自帶修飾線如：u標(biāo)簽、s標(biāo)簽，若有不全大家可以在下面評(píng)論中告訴筆者,畢竟筆者也是前端的一個(gè)小白,希望和大家相互交流，互幫互助，共同進(jìn)步。

u標(biāo)簽#

下面讓我們進(jìn)入u標(biāo)簽的實(shí)踐，u標(biāo)簽自帶的是文本下劃線。
代碼塊

Copy<!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>設(shè)置文本修飾線</title>
 
</head>
<body>
 <u>成功不是擊敗別人，而是改變自己</u>
</body>
</html>

結(jié)果圖

在線咨詢

上一篇：JavaScript中的async/await
下一篇：初步設(shè)計(jì)智慧管理系統(tǒng)-使用手冊(cè).pdf

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商