时间戳

首页 > 解决方案 > vBulletin - onKeyUp 创建新线程时暂停

javascript - vBulletin - onKeyUp 创建新线程时暂停

问题描述

当用户创建新线程时，我正在尝试将我的 keyup 功能集成到 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 中，textarea 包含在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）。这失败了，所以我直接去了 textarea 并将脚本放在 textarea 的正下方，这也没有任何效果。

在那些不成功的尝试之后，我继续将整个代码直接放入模板中（创建另一个文本区域），因为出现重复 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>

我没有返回任何控制台错误，但日志从未发布。

如何从 vBulletin 的 textarea 接收按键事件？

标签： javascriptjquerykeypressvbulletin

解决方案

据我所知，vBulletin 中的某个地方似乎存在 jQuery 问题。这个纯 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)

推荐阅读