Проверьте, был ли выбран элемент/вкладка на

Question

У меня есть страница HTML, где у меня есть несколько div s с contenteditable="true". Я также устанавливаю tabindex последовательно, поэтому, когда пользователь нажимает вкладку, он или она пройдут через все редактируемые div. Однако прямо сейчас у меня есть «Вставить примечания здесь», написанный внутри каждого из div (см. Ниже).

<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> 

Я пытаюсь избавиться от «Вставка примечаний здесь» текст, когда язычки пользователя к div. Прямо сейчас, я могу избавиться от текста, если они нажимают на него со следующим JQuery:

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

Есть ли способ, чтобы достичь того же эффекта, но и когда пользователь использует вкладку?

Answer 1

звучит, как вы ищете событие OnFocus

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

В JQuery:

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

Answer 2

Попробуйте это рабочий фрагмент кода

$(document).on('keyup, focus', '.editor', function(e) { 
 

 
    this.innerHTML = ""; 
 

 
    //detect 'tab' key 
 
    if (e.keyCode == 9) { 
 
    //add tab 
 
    this.innerHTML = ""; 
 

 
    //prevent focusing on next element 
 
    e.preventDefault() 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div contenteditable="true" class="editor" tabindex='1'>1 
 
</div> 
 
<div contenteditable="true" class="editor" tabindex='2'>2 
 
</div> 
 
<div contenteditable="true" class="editor" tabindex='3'>3 
 
</div>