JavaScript实现enter发送消息(附完整源码)

最新推荐文章于 2024-08-14 09:46:38 发布

源代码大师

最新推荐文章于 2024-08-14 09:46:38 发布

阅读量617

点赞数

分类专栏： JavaScript实战教程文章标签： javascript 开发语言 ecmascript

不予转载，严禁转载，违者必纠。

本文链接：https://blog.csdn.net/it_xiangqiang/article/details/134212895

版权

JavaScript实战教程专栏收录该内容

949 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍如何利用JavaScript实现用户按下Enter键时触发发送消息的功能。关键在于正确选择输入框和发送按钮的id，并在事件监听器中处理键盘事件。文章提供了完整的源码，并强调在实际应用中需按需修改元素id。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript实现enter发送消息

以下是实现enter发送消息的JavaScript代码：

// 获取输入框和发送按钮元素
const inputEl = document.getElementById("input-box");
const sendBtnEl = document.getElementById("send-btn");

// 给输入框绑定keydown事件
inputEl.addEventListener("keydown", function(event) {
  // 判断按下的键是否是enter键
  if (event.code === "Enter") {
    // 阻止默认行为，即阻止换行
    event.preventDefault();
    // 触发发送按钮的点击事件
    sendBtnEl.click();
  }
});

// 给发送按钮绑定click事件
sendBtnEl.addEventListener("click", function() {
  // 获取输入框的内容并发送消息
  const message = inputEl.value.trim();
  if (message) {
    sendMessage(message);
    // 清空输入框
    inputEl.value = "";
  }
});

// 发送消息的函数
function sendMessage(message) {
  // 在此添加发送消息的代码
  console.log("发送了一条消息：" + message);
}
</