首頁猿問 JS 插入 URL 鏈接從...

JS 插入 URL 鏈接從 textarea 到帶有實時預覽的圖像 src

JavaScript

一只萌萌小番薯 2022-12-09 15:13:51

如何使用以下代碼將 textarea 中的 URL 文本插入到圖像 src 中：var wpcomment = document.getElementById('previewimage');wpcomment.onmouseover = wpcomment.onkeyup = wpcomment.onkeypress = function(){ document.getElementById('prevCom').innerHTML = this.value;}<textarea name="previewimage" id="previewimage" placeholder="drag drop here"></textarea><div id="prevCom"><img alt="" id="nahled" src=""></div>我已經在這里問過：jQuery : how turn link from textarea to image in div?但只有沒有實時預覽的 jQuery 解決方案。

查看完整描述

3 回答

倚天杖

TA貢獻1828條經驗獲得超3個贊

我認為沒有必要捕獲按鍵和鼠標離開。除了像下面這樣改變圖像屬性，或者image.setAttribute('src', this.value)

var wpcomment = document.getElementById('previewimage');

var image = document.getElementById('nahled');

wpcomment.onkeyup = function(){

image.src = this.value;

}

</div>

反對回復 2022-12-09

心有法竹

TA貢獻1866條經驗獲得超5個贊

這是一個帶有測試和 eventListener 的版本

const wpcomment = document.getElementById('previewimage');

const image = document.getElementById('nahled');

wpcomment.addEventListener("input", function() {

const str = this.value.trim();

if (str.startsWith("data:")) { // data uri

image.src=str;

return;

}

try {

const url = new URL(str);

// if (url.href.contains(....) ===-1) { /* test extension here */ }

image.src=url.href;

} catch (_) {

console.log("Not a valid URL")

return false;

}

});

#prevCom img {

height: 300px;

}

#prevCom img::before {

content: "ッ";

}

</div>

反對回復 2022-12-09

DIEA

TA貢獻1820條經驗獲得超2個贊

var wpcomment = document.getElementById('previewimage');

wpcomment.onmouseover = wpcomment.onkeyup = wpcomment.onkeypress = function(){

document.getElementById('nahled').src = this.value;

}

反對回復 2022-12-09

3 回答
0 關注
205 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

JS 插入 URL 鏈接從 textarea 到帶有實時預覽的圖像 src

JS 插入 URL 鏈接從 textarea 到帶有實時預覽的圖像 src

3 回答

添加回答