入力用フロートラベルスクリプトをテキストエリア用にも変更する

Question

入力ボックス用に機能するフロートラベルスクリプトがあります。私はそれをテキストエリアで動作させるために以下のスクリプトをどのように変更するのですか？ $ fields.on（ "textarea"、floatLabel）をスクリプトに追加しましたが、うまくいきませんでした。どんな助け？

(function($){ 
    var $fields = $(".floatLabel"); 

    // when data is entered... 
    $fields.on("input", floatLabel); 
    $fields.on("textarea", floatLabel); 

    // Check the text fields as soon as the document loads for data that 
    // may have been added upon load 
    floatLabel(); 

    function floatLabel(){ 
    $fields.each(function(i, f){ 
     var $field = $(f); 
     if($field.val().trim() === "" || $field.val() === "blank"){ 
     $field.next().removeClass("active"); 
     } else { 
     $field.next().addClass("active"); 
     } 
    }); 
    } 
})(jQuery); 

CSS

.controls label.active { 
    position:relative; 
    top: -50px; 
    left:-175px; 
    color: #555; 
    background-color: white; 
} 

.controls label { 
    position: relative; 
    top:0px; 
    left:-175px; 
    color: #999; 
    font-size: 18px; 
    display: inline-block; 
    padding-left: 5px; 
    padding-right: 5px; 
    margin: 0; 
    font-weight: 400; 
    background-color: rgba(255, 255, 255, 0); 
    pointer-events: none; 
    transition: color 0.3s, top 0.3s, background-color 0.8s; 
} 

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="top-row"> 
    <div class="field-wrap"> 
    <div class="controls"> 
     <input type="text" class="floatLabel" name="property_address" value="<?php echo $address?>" required> 
     <label for="property_address">Street Address</label> 
    </div> 
    </div> 
    <div class="two-row"> 
    <div class="field-wrap"> 
     <div class="controls"> 
     <textarea name="comments" class="floatLabel">value="<?php echo $comments?>"</textarea> 
     <label for="comments"></label> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

あなたは、それが "InputBox関数に" を意味するが、入力されたイベントではありません

$fields.on("Input") 

の使用を誤解など受け取った入力で。だから、 "textarea"に変更することは、そのイベントが存在しないので何もしません。その行を削除する必要があります。

また、あなたはあなたの関数を呼び出すときは、直接このようにそれを呼び出すことができます。

$fields.on("input", floatLabel()) 

あなたは間に余分なfloatLabel（）を必要としません。これは、スクリプトが読み込まれるとすぐに実行されるためです。

編集：テキストエリアに '入力'イベントがあるかどうかわかりません。しかし、おそらく、あなたはkeyupイベントを見てみる必要がありますか？

https://api.jquery.com/keyup/