相當於HTML佔位符的jquery

當做一個jQuery的佔位符相當於我遇到了表單提交的問題。現在，焦點/聚焦輸出的值發生了變化，但我遇到的問題是字段不能留空，但表單驗證會將默認值作爲一個值讀取，以便允許它。我試着檢查submit（）和onclick（）。點擊提交按鈕並提交表單本身。都沒有工作。如果值是默認值，我需要檢查它何時提交。如果是的話，希望能夠在提交之前使其價值變爲空白。這種方式建立在錯誤系統的drupals將觸發，而不是建立自己的。相當於HTML佔位符的jquery

佔位符文本的當前代碼。

if ($.browser.msie) { 
    // for name field 
    $('#edit-submitted-name').focus(function(){ 
     if ($('#edit-submitted-name').val() == 'Name...') { 
      $(this).val(''); 
      $(this).css('color', '#000'); 
     } 
    }); 
    $('#edit-submitted-name').focusout(function(){ 
     if (!$('#edit-submitted-name').val()) { 
      $(this).val('Name...'); 
      $(this).css('color', '#abadb3'); 
     } 
    }); 
    //for email address field 
    $('#edit-submitted-email-address').focus(function(){ 
     if ($('#edit-submitted-email-address').val() == 'Email Address...') { 
      $(this).val(''); 
      $(this).css('color', '#000'); 
     } 
    }); 
    $('#edit-submitted-email-address').focusout(function(){ 
     if (!$('#edit-submitted-email-address').val()) { 
      $(this).val('Email Address...'); 
      $(this).css('color', '#abadb3'); 
     } 
    }); 
    // for email field 
    $('#edit-submitted-email').focus(function(){ 
     if ($('#edit-submitted-email').val() == 'Email...') { 
      $(this).val(''); 
      $(this).css('color', '#000'); 
     } 
    }); 
    $('#edit-submitted-email').focusout(function(){ 
     if (!$('#edit-submitted-email').val()) { 
      $(this).val('Email...'); 
      $(this).css('color', '#abadb3'); 
     } 
    }); 

    $('#edit-submitted-name').val('Name...'); 
    $('#edit-submitted-name').css('color', '#abadb3'); 
    $('#edit-submitted-email-address').val('Email Address...'); 
    $('#edit-submitted-email-address').css('color', '#abadb3'); 
    $('#edit-submitted-email').val('Email...'); 
    $('#edit-submitted-email').css('color', '#abadb3'); 

}

來源

2012-12-27 Dylan Buth

這可能是一個好主意，使此代碼更通用。您已經爲特定領域構建了具體解決方案。這很好......但如果你仍然使用HTML5佔位符屬性來定義「Email」，然後用jQuery做了類似... $（'input [placeholder]'）。focus（...）;在您關注包含佔位符屬性的任何字段時交換文本。這會顯着減少你在這裏的代碼量。 – Webnet

這對我很好。

$('form.webform-client-form input#edit-submit').click(function(){ 
     if ($('#edit-submitted-name').val() == 'Name...') { 
      $('#edit-submitted-name').val(''); 
      $('form.webform-client-form').submit(); 
     } 
     if ($('#edit-submitted-email-address').val() == 'Email Address...') { 
      $('#edit-submitted-email-address').val(''); 
      $('form.webform-client-form').submit(); 
     } 
     if ($('#edit-submitted-email').val() == 'Email...') { 
      $('#edit-submitted-email').val(''); 
      $('form.webform-client-form').submit(); 
     } 
    });

來源

2012-12-28 03:50:55

'$（'form.webform-client-form input＃edit-submit'）'只需要'$（'＃edit-submit'）'，除非您在頁面上有2個按鈕相同的ID。 – Webnet

即使您嘗試過兩次使用相同的ID，也只會返回第一個ID。 – EpicVoyage

您可以使用jQuery的佔位符插件：jquery.placeholder.js

來源

2012-12-27 05:55:42

jQuery的水印是很好的例子佔位符： -

http://code.google.com/p/jquery-watermark/

來源

2012-12-27 06:00:13

我不認爲你需要一個插件像這個。這似乎可能是矯枉過正。

你是說你做了類似....

$('#formId').submit(function() { 
    //check all inputs in the form, if their values match the placeholders then remove the values 

    //returning true or false here will either continue form submission or stop it (i think) 
});

當您檢查元素，你看到標籤上的任何事件監聽器？ Chrome瀏覽器的檢查器在CSS下面有一個部分，它會向您顯示事件偵聽器。這將幫助你驗證是否有任何東西被添加爲onSubmit

來源

2012-12-27 14:12:26 Webnet

這樣做的問題是我將不得不使用我自己的錯誤系統。我將嘗試 –

相當於HTML佔位符的jquery

回答

相關問題