如何使用 overHang.js 实现文本框输入后顶部下拉通知提示_网络技术

如何使用 overHang.js 实现文本框输入后顶部下拉通知提示

发布时间 - 2026-02-01 00:00:00 点击率：次

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

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

✅ 正确实现步骤

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

需按顺序加载：jQuery

→ jQuery UI（overHang.js 依赖）→ overHang.js 核心 JS + CSS：

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

2. HTML 结构（保持简洁）

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

Textbox

Username:

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 控制等，详见官方文档。

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

# css # javascript # java # jquery # html # js # ajax # npm # cdn # 多语言 # .net # Error

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：小米云服务登录不了怎么办？小米云服务登录问题排查与解决指南

下一篇：Golang 怎么写高性能的 WebSocket 服务？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：小米云服务登录不了怎么办？小米云服务登录问题排查与解决指南

下一篇：Golang 怎么写高性能的 WebSocket 服务？