Using JavaScript Add Onblur to Form Element

  • 0
  • 1
  • Question
  • Updated 4 months ago
  • Answered
Dan Diebolt, this one's for you (or anyone else that can answer!).

Using IOL in a form, I want to add an EventListener for onblur on a rich text field. I've been trying to get it to work, but it keeps firing as soon as the page is loaded.

How could I do this?
Photo of Ryan

Ryan

  • 152 Points 100 badge 2x thumb

Posted 4 months ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,074 Points 20k badge 2x thumb

When you enter text into a Rich Text Field with fid=6 you are not directly entering text into the <textarea id=_fid_6 name=_fid_6></textarea>. Rather you are entering text into the <div> following the <textarea>. This <div> is content editable and the text you enter is only associated to the <textarea> form element when the form is submitted. So to detect when the <div> is blurred you have to use code similar to this:
$("#_fid_6 + div").on("blur", function() {
  console.log(this.innerHTML)
});
Notes:

(1) It may seem unusual but it is common for Rich Text Editors (QuickBase uses ACE) to have text entered into an element different from the form element that will get submitted with the form submits.

(2) The selector "#_fid_6 + div" uses the "+" sign as the adjacent sibling selector.
Photo of Ryan

Ryan

  • 152 Points 100 badge 2x thumb
Thanks Dan!