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

Show the background image location (http://www...) in textbox HTML JAVASCRIPT

本文关键字：www JAVASCRIPT HTML 文本 图像 背景 位置 http 显示      更新时间：2023-09-26

我的网站允许用户使用以下代码的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);
}

我想知道如何在文本框中显示当前背景图像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);
}

然而，每次页面刷新时，文本框都是清晰的。我如何保存这些信息，使其始终保持在文本框中，即使页面刷新?

提前感谢!

你可以得到这样的背景图像:

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('和后面的')，并返回中间的文本。然后，只设置文本框的值。

如何:

function changebackground() {
    var url = document.getElementById('bgchanger').value;
    // populate the input w/ the url:
    setBackground(url);
    localStorage.setItem('back', url);
}
function setBackground(url){
    document.body.style.backgroundImage = "url('" + url + "')";
    setText(url);
}
function setText(url){
    document.getElementById('textfield').value = url;
}
var defaultImage = "'#fff'";
    bgUrl = localStorage.getItem('back') ? localStorage.getItem('back') : defaultImage;
// Set background
setBackground(bgUrl);

我添加的唯一东西是注释行和紧随其后的行。您已经有了URL，只需设置输入元素的值。

我添加了一些代码来初始化文本框，当背景第一次设置(大概是在页面加载时)，根据您在评论中的额外要求，下面

相关文章：