輸入文本切換

我試圖創建一個文本輸入值，即「客戶的名字」顯示，然後當它被點擊它消失，然後如果沒有輸入任何內容，用戶點擊「客戶的名稱」是再次顯示。我已經實現了這一點，但是，如果用戶鍵入某個內容然後改變主意，刪除剛輸入的文本，然後單擊關閉，則不會再出現「客戶名稱」。我會非常感謝你的幫助。輸入文本切換

$(function() { 
    $('#InvClientsName').click(function(){ 
     if($('#InvClientsName').attr("value") == "Client's Name") { 
      $('#InvClientsName').attr("value", ""); 
     } 
    }); 
    $('#InvClientsName').outside('click', function(e) { 
     if($('#InvClientsName').attr("value") == "") { 
      $('#InvClientsName').attr("value", "Client's Name"); 
     } 
    }); 
});

來源

2014-05-08 user3618465

你應該不喜歡用'placeholders'來代替嗎？ - http://www.w3schools.com/tags/att_input_placeholder.asp – Fizzix

「＃InvClientsName'是一個唯一的靜態元素，還是被多次使用並動態創建？ – DevlshOne

有幾件事情你需要考慮在這裏：

當自己場上用戶點擊（focusin event），文本應該空出，但這應該大概只發生，如果他們還沒有把自定義的文本字段已經
當用戶點擊了該領域（focusout event）的，文本應恢復爲默認的文本，但只有當文本不是空

所以，你可以試試這個：

HTML：

<input type="text" id="InvClientsName" value="Hello world!">

的jQuery：

var defaultText = $('#InvClientsName').val(); // grabs the default text field value on page load 

$('#InvClientsName').focusin(function() { // when entering the text field by click or tabbing 
    if($(this).val().trim() == defaultText) // if it's default text 
     $(this).val(''); // blank it out 
}); 

$('#InvClientsName').focusout(function() { // when leaving the text field 
    if($(this).val().trim() == '') // if the field is blank 
     $(this).val(defaultText); // set the value to default 
});

然而，這種行爲是非常相似的placeholder attribute，和你可以簡單地用以下代碼替換整個過程：

<input type="text" id="InvClientsName" value="" placeholder="Hello world!">

Here's a fiddle所以你可以看到不同之處。

來源

2014-05-08 23:02:43

+1，包括對原始問題的解決方案，以及佔位符的很好選擇。 – Fizzix

輸入文本切換

回答

相關問題