入力の問題のカスタムプレースホルダ

Question

私の入力に自分のカスタムプレースホルダに問題があります。私はその親をクリックしていますinputはフォーカスしていません。それらの内部に書き込む。

もう1つの問題は、プレースホルダをクリックするとすべて正常に動作しますが、何かをクリックすると、フォーカスが外れています。inputあなたはそれをどのようにスローするか考えていますか？

$('.placeH').click(function() { 
 
    var that = $(this); 
 
    $('input, textarea').focusout(); 
 
    that.parent().find('input').focusin(); 
 
}) 
 

 
$('input, textarea').focusin(function() { 
 
    var val = $(this).val(); 
 
    $('input, textarea').not($(this)).removeClass('active'); 
 
    if (!val) 
 
    $(this).parent().find('.placeH').addClass('active'); 
 
}); 
 
$('input, textarea').focusout(function() { 
 
    var val = $(this).val(); 
 
    if (!val) 
 
    $(this).parent().find('.placeH').removeClass('active'); 
 
});

input, 
 
textarea { 
 
    outline: none !important; 
 
} 
 
.placeH { 
 
    position: absolute; 
 
    z-index: 10; 
 
    top: 2px; 
 
    left: 30px; 
 
    transition: cubic-bezier(1, 0, .24, 1) .3s; 
 
    -webkit-transform: cubic-bezier(1, 0, .24, 1) .3s; 
 
    -webkit-transform-origin: center bottom; 
 
} 
 
.placeH.active { 
 
    top: -13px; 
 
    font-size: 12px; 
 
    left: 2px; 
 
    transition: cubic-bezier(1, 0, .24, 1) .3s; 
 
    -webkit-transform: cubic-bezier(1, 0, .24, 1) .3s; 
 
    -webkit-transform-origin: center bottom; 
 
} 
 
input { 
 
    width: 100%; 
 
    height: 50px; 
 
    position: relative; 
 
    display: block; 
 
    margin: 20px 0; 
 
} 
 
.rlt { 
 
    display: block; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="rlt mui1 hidden"> 
 
    <input type="email" id="e-mail" class="mail required"> 
 
    <p class="placeH">E-mail</p> 
 
</div> 
 
<div class="rlt mui2 hidden"> 
 
    <input type="tel" id="phone"> 
 
    </label> 
 
    <p class="placeH">Numer telefonu</p> 
 
</div>

Answer 1

私は私の質問への答えを見つけました。 .focusin()によって私は.focus()を使用してトリガのIsteadはすべてのブラウザでうまく動作します。