我正在尝试将图像自动更新为输入框的文本。 这是索引代码:
<body>
<div id="registeer">
<form method="post" action="javascript:login()">
<input type="text" name="gebruikersnaam" placeholder="Gebruikersnaam" /><br><br>
<input type="password" name="wachtwoord" placeholder="Wachtwoord" /><br><br>
<input type="submit" value="Registeer">
<form>
<br>
</div>
<div id="registeer-avatar"></div>
<script src="registeer.js"></script>
这是registeer.js:
$("#registeer input[type=text]").keyup(function(){
var value = $(this).val();
var background = "url(https://www.habbo.nl/habbo-imaging/avatarimage?img_format=gif&user=" + value + "&action=std&direction=3&head_direction=3&gesture=sml&size=b)";
$("#registeer-avatar").css("background", background);
});
$("#registeer input[type=text]").blur(function() {
if(!this.value) {
$("#registeer-avatar").css("background", "url(https://www.habbo.nl/habbo-imaging/avatarimage?img_format=gif&user=ulk&action=std&direction=3&head_direction=3&gesture=sml&size=b)");
}
});
因此，如果您输入第一个输入，例如“hi”，则 registeer-avatar 中的图像将为 habbo....&user=hi，但它不起作用。
感谢您的帮助。
最佳答案
它可以工作，但您需要调整容器的大小:
<div id="registeer-avatar"></div>
现在它没有“空间”，当设置背景时，它不会显示。
例如尝试 CSS:
#registeer-avatar {
border: 1px solid #eee;
min-height: 100px;
}
$("#registeer input[type=text]").keyup(function(){
var value = $(this).val();
var background = "url(https://www.habbo.nl/habbo-imaging/avatarimage?img_format=gif&user=" + value + "&action=std&direction=3&head_direction=3&gesture=sml&size=b)";
$("#registeer-avatar").css("background-image", background);
console.log(background);
});
$("#registeer input[type=text]").blur(function() {
if(!this.value) {
$("#registeer-avatar").css("background", "url(https://www.habbo.nl/habbo-imaging/avatarimage?img_format=gif&user=ulk&action=std&direction=3&head_direction=3&gesture=sml&size=b)");
}
});#registeer-avatar {
border: 1px solid #eee;
min-height: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="registeer">
<form method="post" action="javascript:login()">
<input type="text" name="gebruikersnaam" placeholder="Gebruikersnaam" /><br><br>
<input type="password" name="wachtwoord" placeholder="Wachtwoord" /><br><br>
<input type="submit" value="Registeer">
<form>
<br>
<div id="registeer-avatar"></div>关于javascript - 自动更新图像值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31732667/