Изображение для ввода текста

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").show(); 

Если вы хотите его спрятанным снова (например, в других функциях предварительного просмотра) имеет:

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