vBulletin - onKeyUp Pause when creating a new thread

Question

I am attempting to integrate my keyup function into vBulletin 3 when a user is creating a new thread. The ID of the text area is a variable, but in HTML returns:

<textarea name="message" id="vB_Editor_001_textarea"></textarea>

I have tried replacing the ID in my function with the variable for the ID this also had no effect. my jQuery function is as follows:

function delay(fn, ms) {
  let timer = 0
  return function() {
    clearTimeout(timer)
    timer = setTimeout(fn.bind(this), ms || 0)
  }
}

$('#vB_Editor_001_textarea').keyup(delay(function (e) {
  console.log('Time elapsed!', this.value);
}, 1000));

I have a live working example here.

Within vBulletin the textarea is contained within the editor_toolbar_on template, its raw code looks like:

<textarea name="message" id="{$editorid}_textarea" rows="10" cols="60" style="display:block; width:$stylevar[messagewidth]; height:{$editor_height}px" tabindex="1" dir="$stylevar[textdirection]">$newpost[message]</textarea>

I have attempted placing my script in my footer template (along with jQuery above it). This failed so I went straight to the textarea and placed the script right below the textarea, which also had no effect.

After those unsuccessful attempts I went ahead and placed the entire code right into the template (creating another textarea) upon getting an error for duplicate IDs I numbered this one 2:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function delay(fn, ms) {
  let timer = 0
  return function() {
    clearTimeout(timer)
    timer = setTimeout(fn.bind(this), ms || 0)
  }
}

$('#vB_Editor_002_textarea').keyup(delay(function (e) {
  console.log('Time elapsed!', this.value);
}, 1000));
</script>

I am not returning any console errors, yet the log never posts.

How can I receive the keypress event from vBulletin's textarea?

Answer 1

As far as I can tell, there appears to be an issue with jQuery somewhere within vBulletin. This pure JS version provides the same functionality as the original post and works: (I would like to hear from others regarding the jQuery method though)

function debounce(fn, duration) {
  var timer;
  return function(){
    clearTimeout(timer);
    timer = setTimeout(fn, duration);
  }
}

const txt = document.querySelector('#vB_Editor_001_textarea')
const out = document.querySelector('#out')
const status = document.querySelector('#status')

const onReady = () => {
  txt.addEventListener('keydown', () => {
    out.classList.remove('idle')
    out.classList.add('typing')
    status.textContent = 'typing...'
  })
  
  txt.addEventListener('keyup', debounce(() => {
    out.classList.remove('typing')
    out.classList.add('idle')
    status.textContent = 'idle...'
  }, 2000))
}

document.addEventListener('DOMContentLoaded', onReady)