Показывать div после удаления заполнителя во время ввода формы

Question

У меня есть div, который я хотел бы показать, когда клиент входит в форму. Первоначально я думал, что решение z-index это исправит, но опция отображения / показа кажется лучше.

Однако, похоже, это не работает. Можно ли это сократить или сделать лучше?

    $(document).ready(function(){
    if ($("input#poundprice").text().length > 0) {
        $('.pence-sign').show();
        //$('.pence-sign').addClass('display:block;');
    }                                           
    });

Вот JSFiddle

Answer 1

Вам нужно проверить, когда что-то действительно введено в поле. То, что вы делаете в данный момент, запускается только один раз при загрузке страницы.

$(document).ready(function(){
  $("#poundprice").on("change keydown paste",function(e) {
  	$('.pence-sign').show();  
  });
  
  $("button").click(function(e){
    e.preventDefault();
  });
});

.pence-sign {
  position: absolute;
  top: 23%;
  left: 30%;
  text-transform: lowercase;
  font-family: arial;
  display: none;
}

input, button {
    appearance: none;
    border: none;
    font-size: inherit;
    background: #eee;
    border-radius: 3px;
    padding: 1rem;
    width: 100%;
    max-width: 280px;
    margin-bottom:1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form style="position:relative">
  <div class="poundinput" style="position:relative;">
    <p class="pence-sign">pence</p>
    <input id="poundprice" name="price" type="currency" placeholder="Enter p value" required="">
  </div>
  <button type="submit">Submit</button>
</form>