使用不同的DOM元素

相同的功能我已經輸入文本框具有不同的佔位符，如「的代表數量」等「以秒爲單位所需要的時間」使用不同的DOM元素

<input type="text" id="sets" placeholder="Number of sets"> 
<textarea id="textarea" placeholder="write"></textarea>

我建立了一個click事件每當被點擊任何框，以便用戶輸入像這樣的值其佔位符變爲空白：

textarea.addEventListener("click",checkInput); 
sets.addEventListener("click",checkInput); 

function checkInput(e){ 
    e.currentTarget.placeholder=""; 
}

^^由能夠同時用於文本區域並設置

單一功能

我怎樣才能佔位符回來，如果用戶點擊一個框，但不輸入一個值，並通過使用單一功能的所有項目，像這樣轉移到另一項目（blur事件）：

textarea.addEventListener("blur",originalValue); 
reps.addEventListener("blur",originalValue); 

function originalValue(e){ 
    e.currentTarget.placeholder= default value/original value; 
}

來源

2017-01-18 nishkaush

咦？你所描述的是*佔位符的默認行爲* - 你不必手動清除/重置它們！ – Jamiec

嗨Jamiec，每次我點擊一個框，佔位符消失。但如果我不輸入值並單擊其他位置，則不會重新獲得佔位符。那就是我被卡住了...... – nishkaush

因爲你已經清除了佔位符。只用一個帶有「佔位符」屬性的文本框嘗試它，並且不需要任何代碼來影響它。 – Jamiec

嘗試這個文本框

<input type="text" placeholder="Enter a value">

正如你可以看到有沒有什麼碼所以，它確實是你想要的;如果用戶輸入任何文本，佔位符將被刪除。如果用戶沒有輸入文字（或刪除現有文字），佔位符會在模糊時恢復。

我真的不明白爲什麼你甚至開始寫代碼！

如果您只是想混淆您的用戶，請將佔位符的副本放入元素中，然後清除它並在模糊處恢復。

textarea.addEventListener("click",checkInput); 
 
sets.addEventListener("click",checkInput); 
 
textarea.addEventListener("blur",restore); 
 
sets.addEventListener("blur",restore); 
 

 
function checkInput(e){ 
 
    e.currentTarget.originalPlaceholder = e.currentTarget.placeholder 
 
    e.currentTarget.placeholder=""; 
 
} 
 

 
function restore(e){ 
 
    e.currentTarget.placeholder = e.currentTarget.originalPlaceholder; 
 
}

<input type="text" id="sets" placeholder="Number of sets"> 
 
<textarea id="textarea" placeholder="write"></textarea>

我認爲這是一個可怕的想法FWIW！

來源

2017-01-18 09:30:37 Jamiec

嗨Jamiec，我剛剛做到了，但佔位符一直保持到用戶開始輸入。我想添加功能，只要用戶點擊框，佔位符就會消失，不會等到用戶開始輸入。 – nishkaush

@nishkaush這是正確的行爲。你爲什麼要改變用戶習慣的行爲，並且是合理的。那只是糟糕的用戶體驗！ – Jamiec

@nishkaush我已經用你想要做的事情更新了我的答案。不要阻止它是一個可怕的想法，但如果你想讓你的用戶迷惑，那就取決於你。 – Jamiec

使用不同的DOM元素

回答

相關問題