Tim Chen Tim Chen - 4 months ago 12
HTML Question

Check when an element has been selected/tabbed onto

I have an HTML page where I have a few

div
s with
contenteditable="true"
. I also set the
tabindex
sequentially so when the user hits tab he or she will go through all of the editable
div
s. However, right now I have "Insert notes here" written inside each of the
div
s (see below).

<div contenteditable="true" tabindex='1'>Insert notes here<div>
<div contenteditable="true" tabindex='2'>Insert notes here<div>
<div contenteditable="true" tabindex='3'>Insert notes here<div>


I'm trying to get rid of the "Insert notes here" text when the user tabs to the
div
. Right now, I'm able to get rid of the text if they click on it with the following jQuery:

function selectText(containerid) {
if(document.getElementById(containerid).innerHTML == "Insert notes here") {
document.getElementById(containerid).innerHTML = "";
}
}


Is there a way to achieve the same effect but also when the user uses tab?

Answer

sounds like you are looking for the onfocus event

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

In jquery:

$("#fieldId").focus(function() {
    //your code here 
});