本文介绍如何通过 jquery 和 overhang.js 库，将用户在文本框中输入的内容实时显示为从页面顶部滑落的通知栏，包含完整引入方式、事件绑定逻辑与样式定制方法。

要实现“输入文字 → 点击按钮 → 顶部下拉通知显示自定义内容”的效果，原生 JavaScript 无法直接完成该动效，需借助成熟的轻量级通知插件 —— overHang.js。它专为创建可配置、带动画的顶部/底部浮动通知而设计，支持消息内容、延迟、样式类等灵活控制。

✅ 正确实现步骤

1. 引入必要依赖（推荐 CDN）

需按顺序加载：jQuery → jQuery UI（overHang.js 依赖）→ overHang.js 核心 JS + CSS：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/overhang@1.0.4/dist/overhang.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overhang@1.0.4/dist/overhang.min.css">

⚠️ 注意：jquery-ui.min.js 是必需的（即使只用基础功能），否则 overhang() 方法会报错。

2. HTML 结构（保持简洁）

复用你原有的表单结构，无需修改：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

<article class="regular">
  <h2>Textbox</h2>
  <label for="tbuser">Username:</label>
  <input type="text" id="tbuser" placeholder="Enter username" maxlength="10">
  <input type="button" id="btn1" value="Click Me">
  <p class="output" id="output1"></p>
</article>

3. JavaScript 逻辑（关键改进点）

• 使用 $("body").overhang({...}) 触发顶部下拉通知；
• 拼接用户输入值（如 "thank you " + txt1.value）；
• 添加 setTimeout 防抖（避免连续点击重复触发）；
• 使用 clearTimeout 确保仅执行最后一次点击请求：

const txt1 = document.getElementById('tbuser');
const btn1 = document.getElementById('btn1');
let intvl;

function fun1() {
  clearTimeout(intvl);
  intvl = setTimeout(() => {
    $("body").overhang({
      message: 'Thank you, ' + (txt1.value.trim() || 'guest') + '!',
      type: "success", // 可选：success / error / warn / info
      duration: 3000,
      customClasses: "overhang"
    });
  }, 200);
}

btn1.addEventListener('click', fun1);

4. 自定义样式（可选）

通过 .overhang 类覆盖默认宽度与居中行为：

.overhang {
  width: 80% !important;
  margin: 0 auto !important;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

? 补充说明

• 若输入为空，建议用 txt1.value.trim() 做空值判断，避免显示 "Thank you, !"；
• type 参数可增强语义（如 error 显示红色背景），提升用户体验；
• overHang 支持更多高级选项：图标、按钮回调、多语言、Z-index 控制等，详见 官方文档。

至此，点击按钮后，一条优雅的顶部下拉通知将滑入视野，清晰展示用户输入内容 —— 简洁、可靠、开箱即用。