在表单输入期间删除占位符后显示 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>