jQuery - 用 img 标签填充输入然后附加它答案

【问题标题】：jQuery - Fill input with img tag then append itjQuery - 用 img 标签填充输入然后附加它
【发布时间】：2013-05-29 15:44:55
【问题描述】：

输入没有正确显示输入标签，我尝试了许多变体来转义引号，但我得到了相同的结果！新添加的输入中的 img 标签在引用处被截断。这是我所拥有的：

<div id="student-info">
  <img src="students/24535.jpg" />
</div>

var imgSrc = $('#student-info').find('img').attr('src'); 
var imgCode = '<img src="'+imgSrc+'" />';
$('#student-info').prepend('<span class="img-code"><input type="text" value="'+imgCode+'"></span>');

输出在输入标签中显示<img src=，然后在输入标签后显示">。我怎样才能让最终输出看起来像这样（这样我就可以从输入中复制它）：

<span class="img-code"><input type="text" value="<img src="students/24535.jpg" />"></span>

这是fiddle

【问题讨论】：

那是因为你不能把标签放在<input type="text"/>标签的值属性里面。
为什么不使用 css 作为输入中的图像？
更好的是，您希望通过在文本输入字段中粘贴图像来获得什么？
它应该作为图像嵌入代码工作，而不是在那里有实际图像

标签： jquery image input escaping

【解决方案1】：

您可以采取稍微不同的方法：

var imgSrc = $('#student-info').find('img').attr('src'); 
var imgCode = '<img src="'+imgSrc+'" />';

$('#student-info').prepend('<span class="img-code"><input type="text"></span>');
$('input').val(imgCode);

【讨论】：

其实我有点偏爱这种方法。它可以让您避免尽可能多地进行转义，这意味着（在我的脑海中）更少的机会意外搞砸并最终导致引号不匹配。

【解决方案2】：

替换这个：

value="'+imgCode+'"

至此：

value=\''+imgCode+'\'

这是jsFiddle。

【讨论】：

工作就像一个魅力。谢谢文克！
您了解Vinc 的解决方案为何有效吗？这是因为您的 imgCode 已经包含包含双引号的文本（对于 img src 属性），在您的版本中，这会提前终止属性值并导致显示变得时髦。只是想我会澄清一下。