觸發文本光標編程就像用戶實際點擊輸入標籤

Question

我試着輸入一些數值到文本字段中使用JavaScript，如Gmail電子郵件輸入標籤。 但問題發生了一些花哨的動畫爲他們的佔位符綁定到一些事件，我不知道如何觸發的，比如圖像顯示如下： 輸入後 ：

輸入標籤沒有焦點/選擇輸入的東西有： 與焦點輸入標籤/選擇：

然後我分配的價值，我的價值和花哨的佔位符會互相重疊後。

我試過多種方式，重點/選擇/點擊/兩，沒有什麼工作。所以我在想，如果我可以觸發像用戶那樣的動畫，實際上點擊它然後賦值給它可能工作。

我該如何做到這一點？或者是否有任何其他方式讓該動畫或其輸入檢查代碼捕獲我指定的值，那麼在該佔位符不會降低並重疊我的值之後？

Answer 1

我不知道你如何建立你的輸入，所以有可能是處理它更簡單的方法。 因爲我個人使用JQuery我會用.toggle()函數來做。

$(element).toggle(); 

您也可以更改CSS與.css()功能屬性。只需創建一個聚焦事件並更改其中的顏色等。

希望那是有你要的。 祝你好運:)

Answer 2

您可以使用jQuery的距離和focus和focusout與removeClass和addClass切換類。

例如，你可以做這樣的：

$("input").focus(function(){ 
    $(this).parent().addClass("is-active is-completed"); 
}); 

$("input").focusout(function(){ 
    if($(this).val() === "") 
    $(this).parent().removeClass("is-completed"); 
    $(this).parent().removeClass("is-active"); 
}) 

您也可以使用materialize css's input。