vBulletin - onKeyUp หยุดชั่วคราวเมื่อสร้างเธรดใหม่

ฉันกำลังพยายามรวมฟังก์ชันการคีย์ของฉันเข้ากับ vBulletin 3 เมื่อผู้ใช้สร้างเธรดใหม่ ID ของพื้นที่ข้อความเป็นตัวแปร แต่ใน HTML ส่งคืน:

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

ฉันได้ลองแทนที่ ID ในฟังก์ชันของฉันด้วยตัวแปรสำหรับ ID ซึ่งก็ไม่มีผลเช่นกัน ฟังก์ชั่น jQuery ของฉันเป็นดังนี้:

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

ฉันมีตัวอย่างการทำงานจริงที่นี่

ภายใน vBulletin พื้นที่ข้อความจะอยู่ภายในเทมเพลต editor_toolbar_on โค้ดดิบจะมีลักษณะดังนี้:

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

ฉันได้ลองวางสคริปต์ของฉันในเทมเพลตส่วนท้ายของฉัน (พร้อมกับ jQuery ด้านบน) สิ่งนี้ล้มเหลว ฉันจึงตรงไปที่พื้นที่ข้อความและวางสคริปต์ไว้ใต้พื้นที่ข้อความ ซึ่งไม่มีผลกระทบเช่นกัน

หลังจากความพยายามที่ไม่สำเร็จ ฉันก็เดินหน้าและวางโค้ดทั้งหมดลงในเทมเพลต (สร้างพื้นที่ข้อความอื่น) เมื่อได้รับข้อผิดพลาดสำหรับ ID ที่ซ้ำกัน ฉันกำหนดหมายเลขนี้ไว้ 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.

ฉันจะรับเหตุการณ์การกดปุ่มจากพื้นที่ข้อความของ vBulletin ได้อย่างไร


person GiЯ    schedule 22.11.2020    source แหล่งที่มา


คำตอบ (1)


เท่าที่ฉันสามารถบอกได้ ดูเหมือนว่าจะมีปัญหากับ jQuery ที่ไหนสักแห่งใน vBulletin เวอร์ชัน JS บริสุทธิ์นี้มีฟังก์ชันการทำงานเหมือนกับโพสต์ต้นฉบับและผลงาน: (ฉันต้องการได้ยินจากผู้อื่นเกี่ยวกับวิธีการ jQuery)

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)
person GiЯ    schedule 22.11.2020