2017-01-23 173 views
0

我希望用戶點擊它時選擇整個輸入框。點擊事件沒有被觸發

在我的情況下,輸入框是:

 <label for="bla">My checkbox</label> 
     <input type="input" id="bla" name="check" value="checked" /> 

要做到這一點,我寫了下面的JS:

function SelectAll(bar){ 
    bar.focus(); 
    bar.select(); 
    console.log(bar); 
}  
window.onload=function() 
{ 
    var bla=document.getElementById("bla"); 
    bla.addEventListener('click',SelectAll(bla),false);  
}; 

但所有我在控制檯中得到的是<input type="input" value="checked" name="check" id="bla"> 一次,無論怎樣很多我點擊我不能再得到更多。

+0

您是否希望用戶在他來到您的頁面時被選中您的輸入 –

+0

不,我希望在點擊它時選擇它。只有那樣。 – Vringar

+0

當你點擊你的輸入添加屬性這裏的自動對焦是自動對焦如何添加爲屬性的參考http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_autofocus –

回答

1

addEventListener回調引用應該沒有參數。

.addEventListener('click', SelectAll)

通過添加(bla),它實際上是被稱爲SelectAll(bla)(element),這是不是你想要的。

-2

試試這個:

$("#bla").click(function() { 
    bla.addEventListener('click',SelectAll(bla),false);  
    }); 
function SelectAll(element){ 
    element.focus(); 
    element.select(); 
    console.log(element); 
} 
+0

這使用jQuery,我正在積極嘗試避免任何形式的框架。 – Vringar

+1

這並沒有解決問題,它使情況更糟糕。除了添加jQuery之外,您的所有代碼都會添加一個jQuery點擊綁定,該點擊綁定會添加用JavaScript編寫的原始點擊綁定,但仍然存在與原來相同的問題。另外,每次點擊時,您的jQuery綁定都會執行,並添加另一個點擊綁定。 – Nope

0

總結我的研究得出以下consclusions:因爲它傳遞的事件,以功能

addEventListener回調引用應該沒有參數。

因此實施listener的正確方法是.addEventListener('click', SelectAll, false)

由於event已通過,但您希望使用實際的element,您將需要使用bar.target來訪問它。