焦點上的所有輸入字段上的Javascript運行功能

我想在任何文本字段被聚焦時執行一個函數。焦點上的所有輸入字段上的Javascript運行功能

這樣的事情，而純粹是在Javascript中 - 而不是JQUERY

$("input").focus(function() { 
    alert("Hello World"); 
});

我想：

document.getElementById("text1").onfocus = alert(1);

但是這隻能說明後裝載網頁提醒，沒有別的。

感謝

來源

2015-12-22 Jack

'document.querySelectorAll' - 通過選擇返回所有元素，在循環中，您可以：爲指定的處理函數引用，或使用的addEventListener – Grundy

你試過'document.getElementsByTagName（ '輸入' ）;'？ –

如果你喜歡的jQuery的一些方面，但不希望在項目中包含整個庫，你可以檢查出You Might Not Need jQuery。您可以在頁面頂部的設置中設置您支持的最低版本的IE。

function addEventListener(el, eventName, handler) { 
 
    if (el.addEventListener) { 
 
    el.addEventListener(eventName, handler); 
 
    } else { 
 
    el.attachEvent('on' + eventName, function(){ 
 
     handler.call(el); 
 
    }); 
 
    } 
 
} 
 

 
function addEventListeners(selector, type, handler) { 
 
    var elements = document.querySelectorAll(selector); 
 
    for (var i = 0; i < elements.length; i++) { 
 
    addEventListener(elements[i], type, handler); 
 
    } 
 
} 
 

 
addEventListeners('input', 'focus', function(e) { 
 
    if (this.value !== this.placeholder) { 
 
    this.value = this.placeholder; 
 
    } else { 
 
    this.value = ''; 
 
    } 
 
});

input { 
 
    display: block; 
 
}

<input type="text" placeholder="One" /> 
 
<input type="text" placeholder="Two" /> 
 
<input type="text" placeholder="Three" />

來源

2015-12-22 14:57:18

哦謝謝，這是我尋找的完美的東西再加上非常感謝您的鏈接，如果我可以upvote你，我會做 – Jack

只是想問，http：// youmightnotneedjquery .com /＃上也有Firefox和Chrome的具體指導方針？ – Jack

@Jack，IE通常是***特例***。在Firefox *中起作用的應該*在Chrome中工作，反之亦然。如果您需要澄清，請查看[MDN：EventTarget.addEventListener（）]（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener）以獲取有關瀏覽器兼容性/支持的信息（在頁面底部）。 –

獲取有關他們的標籤名&環（「迭代」）的元素用於連接焦點。

http://www.w3schools.com/jsref/met_doc_getelementsbytagname.asp

var x=document.getElementsByTagName("input");

編輯：在頁面的最後將這個

<script> 
    var x=document.getElementsByTagName("input"); 
for(i=0;i<x.length;i++) 
{ 
x[i].addEventListener('focus',function(){ 
     alert("focus"); 
    }); 
} 

</script>

來源

2015-12-22 14:42:00

循環的東西也被稱爲迭代。 –

我嘗試了，但它沒有在焦點上運行 – Jack

通過編輯您的問題發佈您的代碼 –

的另一種方式與document.querySelectorAll新的瀏覽器

var inputs = document.querySelectorAll('input');

，然後在環路例如使用addEventListener

for(var i=0,len=inputs.length;i<len;i++){ 
    inputs[i].addEventListener('focus',function(){ 
     //handle event 
    }) 
}

來源

2015-12-22 14:49:39 Grundy

焦點上的所有輸入字段上的Javascript運行功能

回答

相關問題