简单js——点击按钮弹窗(文本框的内容)

本文介绍了一个简单的HTML页面,其中包含一个文本输入框和一个按钮。通过JavaScript函数clickMe(), 当按钮被点击时,可以获取到文本框内的值,并在浏览器的控制台及弹窗中显示该值。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function clickMe() {
				//得到input标签对象
				var input = document.getElementById("inputId");
				console.log(input.id) //在控制台打印出inputId
				console.log(input.type) //text
				console.log(input.value) //hello
				alert(input.value);
			}
		</script>
	</head>
	<body>
		<input type="text" id="inputId" value="hello" />
		<button  onclick="clickMe()">点我</button>
	</body>
</html>

效果图:

默认值为hello,点击按钮则弹窗和控制台效果如下:

    

  • 如果文本框输入flora,则

同样点击按钮,效果图如下:

 

         

在Web前端开发中,`top.$.jBox.open()` 是基于 jBox 插件创建弹出层的方式之一。下面我会向您展示如何编写一个包含“确认”、“取消”按钮及“拒绝原因”的文本框的示例。 ### 实现步骤 #### 1. 引入必要的资源文件 首先需要确保引入了 jQuery 和 jBox 的 CSS、JS 文件: ```html <link rel="stylesheet" href="path/to/jbox.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="path/to/jbox.js"></script> ``` > 注:这里的路径需替换为你实际存放 `jbox.css`, `jquery.min.js` 及 `jbox.js` 等静态资源的位置。 #### 2. 编写 HTML 结构 然后我们准备一段简单的HTML作为模态框的内容模板,并隐藏它直到通过 JavaScript 触发显示为止: ```html <!-- 模板 --> <div id="confirmDialog" style="display:none;"> <p>请输入您的操作:</p> <!-- 表单区域开始 --> <form action="#"> <textarea name="reason" placeholder="如果选择否,请填写拒绝理由..." rows="4"></textarea><br/> <button type="submit">确定</button>  <input type="reset" value="取消"/> </form> <!-- 表单结束 --> </div> ``` #### 3. 使用JavaScript触发并配置jBox选项 接下来就是最关键的部分——利用 JavaScript 来初始化 jBox 并设置相应的属性: ```javascript $(function(){ var dialog = new $.jBox('Confirm',{ title : '提示信息', // 标题文字 content:$('#confirmDialog'),// 内容来自上面定义好的 div 元素 submit:function(v,h,f){ if (v == 'ok'){ alert("提交内容:" + f.reason); return true; /* 关闭窗口 */ } else { h.close(); /* 用户点击的是 "取消",直接关闭即可*/ } }, closed:function (){console.log("已关闭")} }); }); ``` 上述代码实现了当用户点击 “确定” 后会弹出警告框显示所填的理由;而一旦选择了 “取消”,则不会有任何进一步动作只是单纯地关掉这个对话框而已。 请注意这只是一个基础版本的例子,在真实项目里还需要考虑更多细节比如样式调整、错误处理等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值