图像显示在文本输入

Question

因此，我目前正在构建一种“实时预览”，并且需要一个占位符图像，以便在信息输入到<input>标记中时出现。我目前正在将此作为我的实时预览代码，用于页面上的文本字段，但无法使其适用于图像。

$(function() 
{ 
    $(".companyname").keyup(function() 
    { 
     var companyname=$(this).val(); 
     $(".cn_preview").html(companyname); 
     return false; 
    }); 

    $(".tagline").keyup(function() 
    { 
     var tagline=$(this).val(); 
     $(".tag_preview").html(tagline); 
     return false; 
    }); 
$(".map").keyup(function() 
     { 
      var map=$(this).val(); 
      $(".map_preview").html(map); 
      return false; 
     }); 

    $(".about").keyup(function() 
    { 
     var about=$(this).val(); 
     $(".abt_preview").html(about); 
     return false; 
    }); 

占位符图像将相对于另一图像定位。该结构是这样的：

<div id="displaycontain"> 
       <div id="previewbottom"> 
        <h2 class="previewbottom">Preview Changes</h2> 
       <img src="images/previewimage.png" border="0" style="margin-left: auto; width: 100%;" /> 
       </div> 
       <div class="action" id="publishbutton"> 
        <input type="button" value="PUBLISH" class="myButton"></div> 
       <div id="test"> 
        <h4 name="cnpreview" class="cn_preview">Company Name</h4> 
        <p name="tagprev" class="tag_preview">Tagline here.</p> 
        <p name="aboutprev" class="abt_preview">This is where your description goes.</p> 
<img src="images/googlemap.png" name="mapplace" class="map_preview" border="0" /> 

       </div> 
      </div> 

而CSS为：

.cn_preview { 
    color: #000000; 
    font-size: 1.2em; 
    text-decoration: none; 
    font-weight: lighter; 
    position: relative; 
    top: -298px; 
    left: 78px; 
    width: 200px; 
} 
.tag_preview { 
    color: #000000; 
    font-size: .8em; 
    text-decoration: none; 
    font-weight: lighter; 
    position: relative; 
    top: -288px; 
    left: 78px; 
    width: 100px; 
} 
.abt_preview { 
    color: #000000; 
    font-size: .7em; 
    text-decoration: none; 
    font-weight: lighter; 
    position: relative; 
    top: -258px; 
    left: 78px; 
    width: 400px; 
} 

这可能是一个长镜头，但任何形式的帮助或方向去哪里将是有益的。

谢谢！

Answer 1

假设预览文本之前，你的意思是添加相同的图像，首先改变你的代码，使用一个单一的功能：（避免冗余代码）

$(function() 
{ 
    $(".companyname").keyup(function() 
    { 
     return Preview($(this), "cn_preview"); 
    }); 

    $(".tagline").keyup(function() 
    { 
     return Preview($(this), "tag_preview");   
    }); 

    $(".about").keyup(function() 
    { 
     return Preview($(this), "abt_preview");   
    }); 
}); 

然后在函数中添加图像：

function Preview(oTextbox, sPreviewClass) { 
    var previewImageSrc = "preview.png"; 
    var value = oTextbox.val(); 
    var oPreviewPanel = $("." + sPreviewClass); 
    oPreviewPanel.empty(); 
    if (value.length > 0) { 
     oPreviewPanel.append($("<img />").attr("src", previewImageSrc)); 
     oPreviewPanel.append(value); 
    } 
    return false; 
} 

以上也会在没有文字时隐藏预览面板。

jsFiddle现在已经关闭，当它回来时会添加实时测试用例。

Live test case。

编辑：从您对我的原始答案的评论，看起来像以上是没有必要在你的情况。首先，只是在默认情况下隐藏的图像：

<img src="images/googlemap.png" name="mapplace" class="map_preview" border="0" style="display: none;" /> 

然后，而不是在该行指定的HTML（这是没有意义的）

$(".map_preview").html(map); 

有这样一行来显示图像：

​​

当你想它（在其他预览功能如）再次隐藏有：

$(".map_preview").hide();