javascript - 在文本框 HTML JAVASCRIPT 中显示背景图像位置 (http ://www. ..)

Question

我的网站允许用户使用带有以下代码的 URL 更改背景图片:

var defaultImage = "'#fff'";
document.getElementsByTagName('body')[0].style.backgroundImage = localStorage.getItem('back') ? "url('" + localStorage.getItem('back') + "')" : "url('" + defaultImage + "')";

function changebackground() {
    var url = document.getElementById('bgchanger').value;
    document.getElementsByTagName('body')[0].style.backgroundImage = "url('" + url + "')";
    localStorage.setItem('back', url);
}

我想知道如何在文本框中显示当前的背景图片网址？

演示:http://goo.gl/253IN

更新: 这就是我想要的:

function changebackground() {
    var url = document.getElementById('bgchanger').value;
    document.getElementsByTagName('body')[0].style.backgroundImage = "url('" + url + "')";

    // populate the input w/ the url:
    document.getElementById('textfield').value = url;    

    localStorage.setItem('back', url);
}

但是每次页面刷新时，文本框都是清晰的。如何保存此信息，以便即使刷新页面时它也始终保留在文本框中？

提前致谢!

Answer 1

你可以这样获取背景图片:

window.onload = function () {
    var bgimage = document.body.style.backgroundImage;
    var cleaned = bgimage.replace(/^url\('/, "").replace(/'\)$/, "");
    var txtbox = document.getElementById("txt1");
    txtbox.value = cleaned || "No background image set";
};

http://jsfiddle.net/KW852/3/

它获取正文的 backgroundImage 样式，然后去除任何前导 url(' 和尾随 ') 并返回中间文本。然后，只需设置文本框的值。