我正在尝试将图像自动更新为输入框的文本。
这是索引代码：
<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/