使用 jQuery 从输入框中设置 img src答案

【问题标题】：Set img src from an input box with jQuery使用 jQuery 从输入框中设置 img src
【发布时间】：2016-06-08 20:55:48
【问题描述】：

我正在尝试使用 jQuery 根据输入框的值设置img src：

<img class="preview" id="img" src="">    
<input id="form" placeholder="skin URL">

这是javascript代码：

$("#form").change(function(){
$("#img").attr("src", $("#form").val());
});

我不知道为什么不起作用。怎么了？

编辑：现在它可以工作了，但是我在输入框上设置了一个 cookie，所以当我刷新页面时，img 仅在输入框失去焦点时加载（使用 .blur()）。我希望 img 总是自动加载。有什么建议吗？

【问题讨论】：

你在$(document).ready中写过.change()事件吗？
对我来说很好！
jsfiddle.net/498ygw4q 看起来不错，但它不起作用
你还没有将 jquery 文件添加到 fiddle
试试：jsfiddle.net/ec76k0vp

标签： javascript jquery html image src

【解决方案1】：

这可能对你有帮助，

$(document).ready(function(){
      $("#form").blur(function(){
          var inputVal = $(this).val();
          $("#img").attr("src", inputVal);
     });
});

【讨论】：

干得好。另一个问题：我在输入框上设置了一个 cookie，所以当我刷新 img 时，只有在输入框失去焦点时才会加载。我希望 img 自动加载

【解决方案2】：

你可以试试这个

<img class="preview" id="img" src="">    
<input id="form" placeholder="skin URL">    

$(document).ready(function(){
      $("#form").keyup(function(){
          var inputVal = $(this).val();
          $("#img").attr("src", inputVal);
     });
});

DEMO HERE

【讨论】：

【解决方案3】：

代码没问题，对我来说工作正常。可能是没有正确引用 jQuery 脚本文件并检查您尝试在 img 上设置的图片 url

【讨论】：