JavaScript和CSS屬性的HTML文本字段不工作

我修改這個codepen筆https://codepen.io/dsholmes/pen/pyeeVQ?q=responsive%20popup&limit=all&order=popularity&depth=everything&show_forks=false JavaScript和CSS屬性的HTML文本字段不工作

，並創建了自己的形式在這個codepen筆 https://codepen.io/eilufoye/pen/RZEvMz

我遇到的問題是，在其他文本框輸入時除名稱外，佔位符/標籤不會消失。

  /* ------------------------- */ 
     /* Contact Form Interactions */ 
    /* ------------------------- */ 
    $('#contact').on('click', function(event) { 
    event.preventDefault(); 

$('#contactblurb').html('Questions, suggestions, and general comments are all welcome!'); 
$('.contact').addClass('is-visible'); 

if ($('#name').val().length != 0) { 
    $('.name').addClass('typing'); 
} 
if ($('#email').val().length != 0) { 
    $('.email').addClass('typing'); 
} 
if ($('#message').val().length != 0) { 
    $('.message').addClass('typing'); 
} 
    });

該代碼處理標籤交互

/* ------------------- */ 
    /* Contact Form Labels */ 
    /* ------------------- */ 
    $('#name').keyup(function() { 
    $('.name').addClass('typing'); 
    if ($(this).val().length == 0) { 
    $('.name').removeClass('typing'); 
    } 
    }); 
    $('#email').keyup(function() { 
    $('.email').addClass('typing'); 
    if ($(this).val().length == 0) { 
    $('.email').removeClass('typing'); 
    } 
    }); 
    $('#message').keyup(function() { 
    $('.message').addClass('typing'); 
    if ($(this).val().length == 0) { 
    $('.message').removeClass('typing'); 
    } 
    });

我怎樣才能使「型號」，「諾西」，「電子郵件」和「數量」標籤/佔位浮子開始打字時離開像「名稱」呢？全部獨立。同樣我怎樣才能使「消息」像「額外音符」一樣獨立地左浮動？

來源

2017-08-31 e.iluf

使用CSS：

yourElementGoesHere{ 
float: left; 
}

來源

2017-08-31 16:09:22 Oqhax

我知道這不是什麼 – Oqhax

它的意思表示要讓它左浮動 – Oqhax

我認爲它很明顯說不上 – Oqhax

您可以設置標籤for屬性和輸入錯誤的id：

你總是寫電子郵件：

<div class="email"> 
 
     <label for="email">Email</label> 
 
     <input type="text" id="email" name="email" /> 
 
     </div> 
 
     <div class="email"> 
 
     <label for="email">NSN</label> 
 
     <input type="text" id="email" name="email" /> 
 
     </div> 
 
     <div class="email"> 
 
     <label for="email">Part Number</label> 
 
     <input type="text" id="email" name="email" /> 
 
     </div> 
 
     <div class="message"> 
 
     <label for="message">Message</label> 
 
     <textarea name="message" id="message" name="message"></textarea> 
 
     </div> 
 
     <div class="email"> 
 
     <label for="email">QTY</label> 
 
     <input type="text" id="email" name="email" /> 
 
     </div>

來源

2017-08-31 16:10:40

我無法爲所有輸入使用相同的ID，我需要爲每個輸入設置一個唯一的ID，以便我可以保存其各自的輸入數據。 –

這是你的問題，我將你的代碼複製到我的答案中。你必須改變這一點。 –

您可以使用

<style> 
 
    label { 
 
    float: left; 
 
    } 
 
    
 
    </stle>

來源

2017-08-31 16:24:08

JavaScript和CSS屬性的HTML文本字段不工作

回答

相關問題