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(){

  image.src = this.value;

}

<textarea name="previewimage" id="previewimage" placeholder="drag drop here"></textarea>

<div id="prevCom">

  <img alt="" id="nahled" src="" />

</div>

Answer 2

这是一个带有测试和 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: "ッ";

}

<textarea name="previewimage" id="previewimage" placeholder="drag drop here"></textarea>

<div id="prevCom">

  <img alt="" id="nahled" src="" />

</div>

Answer 3

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

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

    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>