开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js点击弹出输入框

在前端开发中，实现点击按钮弹出输入框的功能，通常可以使用HTML、CSS和JavaScript来完成。下面是一个简单的示例，展示了如何实现这一功能：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击弹出输入框</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="openInputBtn">点击输入</button>
    <div id="inputModal" class="modal">
        <div class="modal-content">
            <span id="closeInputBtn" class="close">&times;</span>
            <input type="text" id="userInput" placeholder="请输入内容">
            <button id="submitInputBtn">提交</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

JavaScript部分（script.js）

document.getElementById('openInputBtn').addEventListener('click', function() {
    document.getElementById('inputModal').style.display = 'block';
});

document.getElementById('closeInputBtn').addEventListener('click', function() {
    document.getElementById('inputModal').style.display = 'none';
});

document.getElementById('submitInputBtn').addEventListener('click', function() {
    var userInput = document.getElementById('userInput').value;
    alert('你输入的内容是: ' + userInput);
    document.getElementById('inputModal').style.display = 'none';
});

window.addEventListener('click', function(event) {
    if (event.target == document.getElementById('inputModal')) {
        document.getElementById('inputModal').style.display = 'none';
    }
});

解释

HTML部分：定义了一个按钮和一个模态框（弹出框），模态框中包含一个输入框和提交按钮。
CSS部分：设置了模态框的样式，使其在默认情况下隐藏，并在显示时覆盖整个页面。
JavaScript部分：
- 当点击“点击输入”按钮时，显示模态框。
- 当点击模态框右上角的关闭按钮或点击模态框外部区域时，隐藏模态框。
- 当点击提交按钮时，获取输入框的内容并显示一个提示框，然后隐藏模态框。

应用场景

这种点击弹出输入框的功能在很多场景中都有应用，例如：

表单填写：用户点击某个按钮后弹出输入框，填写必要信息。
搜索功能：用户点击搜索按钮后弹出输入框，输入搜索关键词。
提示信息：用户点击某个按钮后弹出输入框，输入提示信息。

通过这种方式，可以提升用户体验，使界面更加友好和互动。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js单击输入框后弹出提示信息效果

http-equiv="Content-Type" content="text/html; charset=gb2312" /> js...,zzjs,zzjs.net,sky,www.zzjs.net,站长特效网" /> js...大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" /> 单击输入框后给出提示效果，sky整理收集。 js特效，本站收集大量高质量js代码，还有许多广告代码下载。...zzjs.net，站长js特效。 <!

11.1K5 0

后视镜加热按键图标_js点击按钮弹出图片

如下图： JS源代码： /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration 速度 * @param stime 时间间隔 (毫秒) **/ function

27.8K2 0

DIV+JS+CSS实现点击弹出图片效果

前几天扒了vue vlog的官网，想给添加一个像博客一样的点击微信图标弹出公众号二维码。...FFFFFF; z-index: 1002; /* 数字的大小指明了div的相对层，数字大的在上层 */ overflow: auto; } Select Code Copy js

26.2K3 0

vue中js全局鼠标点击弹出文字

前作者:一碗单炒饭在原作者代码的基础上进行修改,将内容放入数组,可按序显示或随机展示增加userSelect样式,快速点击时文字不会被选中可以使用Emoji ????????...elem.style.opacity = (150 - increase) / 120; }, 8); }, 70); $body.appendChild($elem); }; }; 在main.js.../static/js/mouseClick' Vue.use(mouse)

7.3K3 0

SAP ABAP 弹出输入框功能

POPUP_TITLE : 设置弹出框标题 START_COLUMN：设置弹出框开始列位置 START_ROW ：设置弹出框开始行位置 FIELDS ...：设置弹出框界面字段信息代码样例： DATA: lt_value TYPE TABLE OF sval, ls_value TYPE sval...."弹出输入框，用于创建工单时的工厂信息 CALL FUNCTION 'POPUP_GET_VALUES' EXPORTING * NO_VALUE_CHECK...注意：输入框如果设置为必输，可以通过FIELD_OBL字段设置，设置值为X的时候表示必输，为空的时候则不需要必输

3732 0

ABAP 弹出月份输入框函数

2634 0

SearchView 禁止自动弹出输入框

focusableInTouchMode="true" 2、search.setFocusable(false); 3、search.clearFocus();在onresume中也需要执行，清除焦点，保证返回的时候不会再次弹出

2.3K1 0

matinal：SAP ABAP 弹出输入框函数

"如果是金额的话要把参考表和参考字段也写进来，然后隐藏，不然金额的输入框是不能输入的 CLEAR wa_sval . wa_sval-tabname = 'BSIS'. wa_sval-fieldname...*itb_sval-value 就是输入框的值

2702 0

jQuery点击按钮，生成input输入框

需求，点击添加按钮，生成input输入框，如果上一个输入框为空，则弹出提示框提示，若不为空，则生成一行input框。 js..."> js/bootstrap.min.js

6.7K1 0

鼠标点击弹出 “富强民主 ”特效

按照知识共享署名-非商业性使用 4.0 国际协议进行许可，转载引用文章应遵循相同协议。

1.9K2 0

点击input输入框实现页面跳转功能

小图标的大小*/ background-position: 65% 4px;/*小图标在input的位置*/ background-repeat: no-repeat;/*背景小图标不重复*/ } 3.js.../search/search' }) }, js部分代码可以参考微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/api

3.5K1 0

小程序点击按钮弹出可填写框

这是项目里面一个简单的效果，小程序点击按钮弹出可填写框，摘下代码，方便之后遇到的时候可以直接拿来使用。效果如下： ? wxml <!....col-1 { -webkit-box-flex: 1; box-flex: 1; } .fl { float: left; } .fr { float: right; } js...// pages/leftSwiperDel/index.js Page({ data: { showModalStatus: false }, onLoad: function(

3.3K1 0

Flutter的showModalBottomSheet 输入框被弹出的键盘挡住？

并且输入框是从底部弹起的一个单独层。需求分析拿到这个需求很简单，直接 showModalBottomSheet + textfield组件就搞定。...我点输入框后，弹出的键盘挡住了输入框。我很方，键盘怎么就没有把输入框推上去呢，和我想的不太一样啊。解决方法使用 AnimatedPadding这个widget，我们来看看它的解释。...嗯，是Padding的动画版本，我们利用它在键盘谈起的时候给我们的输入框加个padding就好了。万事大吉！！！

3.5K1 0

JS-DOM2级封装练习题--点击登录弹出登录对话框

} } // 显示登录层函数 function showLogin() {//普通的通过js操作css样式的代码，只不过定义成了一个函数封装起来一会方便调用。...隐藏登录层函数 function hideLogin() { // 执行代码 login_box.style.display = "none"; } //点击登录按钮显示登录层...(login_btn,'click', showLogin);//调用函数，传三个参数，分别是要承载、执行事件的按钮id变量名，事件名称-不加on，触发这个事件后会调用或执行的函数（名） //点击关闭按钮隐藏登录层

3.7K7 0

Fabric.js 激活输入框🎈

再次点的方法是使用 JS 获取输入框元素，再调用 focus 事件选中输入框。在 Fabric.js 中，IText 组件也提供了类似的方法。...默认情况在 Fabric.js 中，如果在创建 IText 时没有添加文字，在画布上你是很难用肉眼观察出你的输入框在哪的。...-- 引入 Fabric.js --> js/521/fabric.js">...> 复制代码此时画布和输入框是被创建出来了，但凭肉眼是很难找到输入框在哪。...使用 Fabric.js 最主要是多看文档，然后把多个 api 结合起来使用，就能创造出多种效果~ 代码仓库 ⭐IText 激活输入框

6K1 0

iOS点击TableView的cell显示弹出动画

最近使用豌豆荚一览的app时看到它的点击cell后弹出界面的动画很帅，所以自己琢磨着实现了一个，效果如下： image 仔细观察的话效果分为几个部分，点击cell的时候，首先背景会出现阴影，只有点击的...弄清楚动画的组成成分以后，开始动手实现，怎么实现列表和详情界面就不说了，可以在文末我的示例工程里面看，直接说cell的点击后执行的过程。...我们这里需要额外用到三个小vied，一个是背景的阴影view，一个是点击的cell的view，一个是cell慢慢变成的纯白色view（最后炸开的也是这个纯白的view）。...因为这三个视图是在我们点击的时候添加的，我们必须进行移除，否则从详情界面回来列表界面之后，这三个视图还会存在，所以我们要在viewWillAppear方法中将其移除： - (void)viewWillAppear...要注意的是我们不能直接使用点击到的cell的位置，经测试直接用他的原点会变成（0, 0），也就是出现在左上角，我也不知道为什么，所以这里要先获取对应的区域来更改cell的范围并作为纯白view的范围。

1.5K1 0

jquery点击按钮，添加一行input输入框

功能需求：点击添加按钮的时候，会添加一行input输入框，使用jquery来实现一下。虽然现在前端开发小伙伴们都不用jquery了，但是，我还是决定要记录一下这个小demo,因为用到的比较多。...twitter-bootstrap/4.3.1/css/bootstrap.min.css"> js..."> js/bootstrap.min.js"></script

4.8K4 0

element 输入框点击事件_ElementUI的input事件问题

最近用ElementUI的el-input组件，然后发现一个问题，就是我在输入框后，加一个icon的button，然后我希望这个输入框可以触发两个事件，第一个是，输入完，按键盘回车键的事件，第二个是...这change(因为失焦)和click(因为点击了button)一起触发。。我特么。。。我人都傻了。。这什么鬼设定。。有没有大佬有办法的，我感觉这个change带失焦好恶心。。

3.6K2 0

WordPress给网站添加鼠标点击爱心弹出效果

一、部署JS代码（将以下代码保存为js文件，文件名：love.js，然后直接引入使用，点击页面任意位置就可以看到效果了） (function(window,document,undefined){ var...Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")"; } })(window,document); 二、引用JS...文件找到主题的footer.php文件中引用js文件，添加以下代码即可 js">

8832 0

jQuery实现点击图片弹出视频并自动播放

有时候我们需要放一张视频的封面，当我们点击封面的时候就播放弹出视频并自动播放，而且我们还可以把视频的封面做成视频加载前的封面，代码较少 js.../jquery-2.1.4.min.js "> $('.one').each(function () { //遍历视频列表...$(this).click(function () { //这个视频被点击后执行 var img = $(this).attr('vpath');//获取视频预览图...var v = document.getElementById('video');//获取视频节点 $('.videos').css("display", "none");//点击关闭按钮关闭暂停视频

5.6K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭