jQuery輸入值焦點和模糊

我有以下代碼，以便當用戶選擇一個輸入框時，該值將消失，但默認值將被重新插入，一旦用戶點擊它。jQuery輸入值焦點和模糊

 $(function() { 
      var defaultText = ''; 
      $('input[id=input]').focus(function() { 
       defaultText = $(this).val(); 
       $(this).val(''); 
      }); 
      $('input[id=input]').blur(function() { 
       $(this).val(defaultText); 
      }); 
     });

但是，這不完全是我想要的。如果用戶插入文本，我不希望默認文本覆蓋用戶放置的內容。我也是相當新的jQuery，所以任何幫助將不勝感激。

來源

2012-11-01 Karl

你想放置佔位符嗎？ – nicooga

您在設置和取消設置'defaultText'時都存在問題...在'focus'上，它會將'defaultText'值更改爲當前輸入值。 – doublesharp

在你focus()方法你應該檢查，看它是否清除之前等於defaultText，並在blur()功能，你只需要檢查val()是設置defaultText之前空。如果您要使用多個輸入，最好使用類而不是ID，所以當類是「輸入」時，您的選擇器將是input.input。即使它是一個ID，你也可以將它作爲input#input。

// run when DOM is ready() 
$(document).ready(function() { 
    $('input.input').on('focus', function() { 
     // On first focus, check to see if we have the default text saved 
     // If not, save current value to data() 
     if (!$(this).data('defaultText')) $(this).data('defaultText', $(this).val()); 

     // check to see if the input currently equals the default before clearing it 
        if ($(this).val()==$(this).data('defaultText')) $(this).val(''); 
    }); 
    $('input.input').on('blur', function() { 
     // on blur, if there is no value, set the defaultText 
     if ($(this).val()=='') $(this).val($(this).data('defaultText')); 
    }); 
});

設置它在this jsFiddle的行動。

來源

2012-11-01 18:03:50 doublesharp

我無法在函數中設置defaultText，因爲它將在很多地方使用，我不想讓js文件變大。是否有任何解決方法，因爲atm如果用戶鍵入某個內容，然後再次單擊該輸入，則會將其更改爲「'。 – Karl

@Karl這不會在函數中設置'defaultText'。您希望默認值是表單載入時的輸入值嗎？ – doublesharp

var defaultText ='您的默認文本。';它的確如此。有不同的輸入，每個都有不同的defaultText。我需要它不清除輸入，如果用戶已經插入一些東西，並點擊關閉，然後點擊它。 – Karl

在您的模糊處理程序只是檢查，如果用戶沒有寫東西了，在這種情況下放回默認的文本，像這樣：

  $('input[id=input]').blur(function() { 
      if ($(this).val() == '') { 
       $(this).val(defaultText); 
      } 
     });

來源

2012-11-01 18:04:48 Nelson

應該是$（this）.val（）==但是，謝謝，我覺得有點愚蠢，因爲沒有想到這一點：P – Karl

是的，我注意到，發佈後，編輯我的答案後修復它。希望這對你有用。 – Nelson

一個老問題+我不喜歡它，當人們提供了另一種解決方案，而不是解決我的問題，但仍然：與jQuery插件使用HTML佔位符屬性將解決此問題。

您也可以使用HTML數據屬性並從中讀寫。

來源

2016-03-02 13:56:52 Wancieho

jQuery輸入值焦點和模糊

回答

相關問題