專注於點擊不工作

Question

我想隱藏佔位符點擊，但似乎阻塞的重點，我嘗試添加css input:focus:placeholder等。 但是沒什麼，這是我的整個代碼，請嘗試一下，如果有js的東西，這阻止焦點狀態。

jsfiddle.net/74fnr3k7/

Answer 1

你標記這個問題與jQuery ，但是你沒有包含在你的小提琴中，所以我不確定你是否使用它。如果你是，這些行添加到您的JS和它會刪除焦點佔位符：

$('input').on('focus',function(){ 
    $(this).attr('placeholder',""); 
}); 

確保你把它包裝在一個函數的document.ready（$（函數（）...在JQuery中）。這裏有一個小提琴：

http://jsfiddle.net/4tt77a65/

Answer 2

隱藏在輸入欄上的焦點佔位符，你可以使用onfocus和onblur事件。

請參閱以下的例子：

<input type="text" placeholder="placeholder" onfocus="this.placeholder = ''" onblur="this.placeholder = 'placeholder'"/>

Answer 3

補充一點：

textarea:focus, input:focus 
 
{ 
 
    outline: none; 
 
}

<div class="form-group"> 
 
    <input type="text" id="exampleInlineTags" class="form-control token-example-field" name="search" value="" placeholder="placeholder" /> 
 
    <button type="submit" class="btn btn-primary pull-right pretraga " id="sonata_search_submit"> 
 
    <i class="glyphicon glyphicon-search"></i> 
 
    <span>SEARCH</span> 
 
    </button> 
 
</div>

Answer 4

的placeholder=""屬性通常，當用戶開始輸入如果你想在用戶開始輸入之前隱藏的文本消失，你可以使用placeholder pseudo-element草案

您CA。 n通過改變佔位符的文字顏色來隱藏文字。

/* Chrome/Safari/Opera */ 
input[type="text"]:focus::-webkit-input-placeholder { 
    color: transparent; 
} 

/* Firefox */ 
input[type="text"]:focus::-moz-placeholder { 
    color: transparent; 
} 

/* Internet Explorer */ 
input[type="text"]:focus:-ms-input-placeholder { 
    color: transparent; 
} 

/* Edge */ 
input[type="text"]:focus::-ms-input-placeholder { 
    color: transparent; 
} 

由於@Shaggy指出的那樣，我不包括::placeholder沒有任何特定瀏覽器的前綴：

input[type="text"]:focus::placeholder { 
    color: transparent; 
} 

在這個階段，我不知道它（如果有的話）的瀏覽器無需瀏覽器前綴即可支持。 Can I Use指出，每個瀏覽器都需要一個前綴，因爲此刻此僞選擇器爲draft status。但是，如果添加不帶前綴的選擇器，將會在將來的代碼成爲標準僞選擇器時進行驗證。

還有其他選項可能會使用JavaScript來更改placeholder=""的onBlur()和onFocus()事件的值。