JS 插入 URL 链接从 textarea 到带有实时预览的图像 src

Question

如何使用以下代码将 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 解决方案。

Answer 1

我认为没有必要捕获按键和鼠标离开。除了像下面这样改变图像属性，或者image.setAttribute('src', this.value)var wpcomment = document.getElementById('previewimage');var image = document.getElementById('nahled');wpcomment.onkeyup = function(){&nbsp; image.src = this.value;}<textarea name="previewimage" id="previewimage" placeholder="drag drop here"></textarea><div id="prevCom">&nbsp; <img alt="" id="nahled" src="" /></div>

Answer 2

这是一个带有测试和 eventListener 的版本const wpcomment = document.getElementById('previewimage');const image = document.getElementById('nahled');wpcomment.addEventListener("input", function() {&nbsp; const str = this.value.trim();&nbsp; if (str.startsWith("data:")) { // data uri&nbsp; &nbsp; image.src=str;&nbsp; &nbsp; return;&nbsp; }&nbsp; try {&nbsp; &nbsp; const url = new URL(str);&nbsp; &nbsp; // if (url.href.contains(....) ===-1) { /* test extension here */ }&nbsp; &nbsp; image.src=url.href;&nbsp; } catch (_) {&nbsp; &nbsp; console.log("Not a valid URL")&nbsp; &nbsp; return false;&nbsp; }});#prevCom img {&nbsp; height: 300px;}#prevCom img::before {&nbsp; content: "ッ";}<textarea name="previewimage" id="previewimage" placeholder="drag drop here"></textarea><div id="prevCom">&nbsp; <img alt="" id="nahled" src="" /></div>

Answer 3

var wpcomment = document.getElementById('previewimage');wpcomment.onmouseover = wpcomment.onkeyup = wpcomment.onkeypress = function(){&nbsp; &nbsp; document.getElementById('nahled').src = this.value;}<textarea name="previewimage" id="previewimage" placeholder="drag drop here"></textarea><div id="prevCom"><img alt="" id="nahled" src=""></div>