代码之家 › 专栏 › 技术社区 › pithhelmet

确定调用函数的字段

javascript

-1

pithhelmet · 技术社区 · 6 年前

我不知道该问什么,所以请耐心等待。

我有一个输入字段,需要获取onfocusin和onfocusout事件并执行一些逻辑。

我想用一个普通函数来处理onfocusin,用一个普通函数来处理onfocusout函数。

那么-如何确定函数中输入字段的ID?

<input type="text" class="form-control" id="location_notes"  onfocusin="fieldFocusIn()" onfocusout="fieldFocusOut()" placeholder="Location Notes">
<input type="text" class="form-control" id="additional_notes"  onfocusin="fieldFocusIn()" onfocusout="fieldFocusOut()" placeholder="Additional Notes">

function fieldFocusIn(){
// do some stuff with the calling field
}

function fieldFocusOut(){
// do some different stuff with the calling field
}

4 回复 | 直到 6 年前

zfrisch 6 年前

event.currentTarget.id -为了获取事件对象,因为您使用的是内联事件,所以需要传递单词 event onfocusin="fieldFocusIn(event)"

在事件处理程序中,您接收事件参数,并查看 currentTarget 对象,并在 id

<input type="text" class="form-control" id="location_notes"  onfocusin="fieldFocusIn(event)" onfocusout="fieldFocusOut(event)" placeholder="Location Notes">
<input type="text" class="form-control" id="additional_notes"  onfocusin="fieldFocusIn(event)" onfocusout="fieldFocusOut(event)" placeholder="Additional Notes">

<script>

function fieldFocusIn(e){
console.log(e.currentTarget.id);
// do some stuff with the calling field
}

function fieldFocusOut(e){
console.log(e.currentTarget.id);
// do some different stuff with the calling field
}
</script>

kind user Faly 6 年前

你只需通过你想要的考试 id 作为函数参数:

<input 
    id="location_notes"  
    onfocusin="fieldFocusIn('location_notes')" 
    onfocusout="fieldFocusOut('location_notes')"
>

function fieldFocusIn(id){
    console.log(id) // location_notes
}

function fieldFocusOut(id){
   console.log(id) // location_notes
}

Matthew Herbst 6 年前

id 从 target 如果:

function fieldFocusIn(event){
    console.log(event.target.attributes.id.value);
}

function fieldFocusOut(event){
   console.log(event.target.attributes.id.value);
}

customcommander 6 年前

你也可以考虑使用 event delegation

function focusIn(callback) {
  document.querySelector('#fields').addEventListener('focusin',
    (event) => callback(event.target.id));
}

function focusOut(callback) {
  document.querySelector('#fields').addEventListener('focusout', 
    (event) => callback(event.target.id));
}

focusIn((id) => console.log(`focus in: ${id}`));
focusOut((id) => console.log(`focus out: ${id}`));

<div id="fields">
  <input id="foo" placeholder="foo" />
  <input id="bar" placeholder="bar" />
  <input id="baz" placeholder="baz" />
  <input id="bat" placeholder="bat" />
</div>