Question

我正在尝试将图像自动更新为输入框的文本。这是索引代码：

<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)");
}
});

因此，如果您输入第一个输入例如＆＃39; hi＆＃39;，registeer-avatar中的图像将是habbo ....＆amp; user = hi，但它不起作用。

感谢您的帮助。

Answer 1

它有效，但您需要调整容器的大小：

  <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>

自动将图像更新为值

1 个答案: