如何实现两种textarea文本删除场景下为指定div添加红色边框的功能

我来帮你搞定这两个需求，咱们直接上代码加解释，保证清晰易懂～

首先得明确两个场景的核心触发条件，分别针对性处理：

场景1：全选文本后按退格/删除 #

这个场景要在按键按下时就检测是否全选了文本——如果等到keyup事件，文本已经被删没了，就没法判断之前是不是全选状态了。我们可以通过textarea的selectionStart和selectionEnd属性，直接判断当前选区是否覆盖了全部文本。

场景2：长按退格/删除直到文本全删 #

这个场景需要记录按键按下的时长，只有当长按时间超过设定的阈值（比如500ms，你可以根据需求调整），并且最终文本被删空时，才触发加边框操作。短按（时长不足阈值）哪怕删了部分文本，也不会触发。

接下来是完整的实现代码：

<div id="getcss">html contents</div>
<textarea name="new" id="message">text content</textarea>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 记录按键按下的开始时间
let keyDownStartTime = null;
// 设定长按阈值（毫秒），可根据需求调整
const LONG_PRESS_THRESHOLD = 500;

$('#message').on('keydown', function(e) {
  // 只处理退格键（keyCode=8）和删除键（keyCode=46）
  if (e.keyCode === 8 || e.keyCode === 46) {
    // 记录按键开始的时间戳
    keyDownStartTime = Date.now();
    
    // 处理场景1：检测是否全选了所有文本
    const $textarea = $(this);
    const fullText = $textarea.val();
    const isFullSelected = $textarea[0].selectionStart === 0 && $textarea[0].selectionEnd === fullText.length;
    
    // 如果是全选状态且文本不为空，延迟判断是否删空
    if (isFullSelected && fullText.length > 0) {
      // 用setTimeout让浏览器先执行删除操作，再检查结果
      setTimeout(() => {
        if ($textarea.val().length === 0) {
          $('#getcss').css('border', '1px solid red');
        }
      }, 0);
    }
  }
});

$('#message').on('keyup', function(e) {
  // 只处理退格键和删除键
  if (e.keyCode === 8 || e.keyCode === 46) {
    const pressDuration = Date.now() - keyDownStartTime;
    const $textarea = $(this);
    
    // 处理场景2：长按超过阈值，且文本已被删空
    if (pressDuration >= LONG_PRESS_THRESHOLD && $textarea.val().length === 0) {
      $('#getcss').css('border', '1px solid red');
    }
    
    // 重置开始时间，避免影响下一次按键判断
    keyDownStartTime = null;
  }
});
</script>

关键代码解释 #

1. 场景1的判断逻辑：
   在keydown事件中，通过selectionStart和selectionEnd判断选区是否覆盖全部文本，再用setTimeout延迟检查文本是否被删空——因为keydown触发时，浏览器还没执行删除操作，延迟0ms能确保我们拿到删除后的结果。

2. 场景2的长按判断：
   keydown时记录开始时间，keyup时计算按键时长，只有时长超过设定阈值，且此时文本为空，才给div加红边框。这样就完美避开了短按的误触发。

3. 可调整的细节：

   • 长按阈值LONG_PRESS_THRESHOLD可以自己改，比如改成600ms会更严格，400ms会更宽松；
   • 如果你的项目已经引入了jQuery，可以去掉代码里的jQuery CDN链接。

最后测试一下效果：

• 全选textarea文本按退格/删除，div立刻出现红边框；
• 不选中文本长按退格/删除直到文本全删，松开后div出现红边框；短按删几个字则完全没反应。

备注：内容来源于stack exchange，提问作者user28928120