2017-08-31 53 views
0

我修改這個codepen筆https://codepen.io/dsholmes/pen/pyeeVQ?q=responsive%20popup&limit=all&order=popularity&depth=everything&show_forks=falseJavaScript和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'); 
    } 
    }); 

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

回答

0

使用CSS:

yourElementGoesHere{ 
float: left; 
} 
+0

我知道這不是什麼 – Oqhax

+0

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

+0

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

1

您可以設置標籤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>

+0

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

+0

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

0

您可以使用

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