如何在vanilla javascript中单击文档时关闭输入
在vanilla JavaScript中，可以通过以下步骤来实现单击文档时关闭输入：
- 首先，需要获取文档中的输入元素。可以使用
document.querySelector或document.getElementById等方法来获取特定的输入元素。例如，如果有一个输入框的id为inputBox，可以使用以下代码获取该元素：
const inputBox = document.getElementById('inputBox');- 接下来，需要为文档添加一个单击事件监听器。可以使用
addEventListener方法来为文档添加单击事件监听器。以下是添加单击事件监听器的示例代码：
document.addEventListener('click', function(event) {
// 在这里编写关闭输入的代码
});- 在单击事件监听器的回调函数中，需要判断点击事件的目标元素是否为输入元素或输入元素的子元素。可以使用
event.target属性来获取点击事件的目标元素。如果目标元素是输入元素或输入元素的子元素，则不执行关闭输入的操作。否则，执行关闭输入的操作。以下是判断目标元素的示例代码：
document.addEventListener('click', function(event) {
if (!inputBox.contains(event.target)) {
// 在这里编写关闭输入的代码
}
});- 最后，关闭输入的操作可以通过将输入元素的
disabled属性设置为true来实现。这将禁用输入元素，使其无法接收用户输入。以下是关闭输入的示例代码：
document.addEventListener('click', function(event) {
if (!inputBox.contains(event.target)) {
inputBox.disabled = true;
}
});完整的代码示例：
const inputBox = document.getElementById('inputBox');
document.addEventListener('click', function(event) {
if (!inputBox.contains(event.target)) {
inputBox.disabled = true;
}
});这样，当用户单击文档中的其他区域时，输入框将被禁用，无法接收用户输入。
相关·内容
我已经创建了一个带有按钮的输入，当我单击按钮时，输入show和remove。但我也希望在单击DOM时删除输入，并且我知道应该将addEventListeners设置为DOM。
浏览 35提问于2020-12-11得票数 0
回答已采纳
29回答
如何检测元素外部的单击？我使用Vue.js，所以它将在我的模板元素之外。我知道如何在Vanilla JS中做到这一点，但我不确定当我使用Vue.js时，是否有更合适的方法来做到这一点？这是Vanilla JS的解决方案：Javascript检测div外部的单击事件 我想我可以使用一种更好的方法来访问元素？
浏览 290提问于2016-03-23得票数 163
回答已采纳
1回答
捕获浏览器事件
、、
如何使用javascript或任何其他客户端脚本捕获浏览器事件，如“关闭窗口”、“按下后退按钮”。
有没有一种方法可以在文档外部单击时捕获事件。
浏览 2提问于2010-08-31得票数 2
回答已采纳
但问题是他们的文档只有Vanilla JavaScript实现，没有基于Angular的Web App的文档。来自他们在上的文档
我需要添加登录页面上的匿名用户的小工具，一旦用户登录，小工具应该有用户的最后一次对话，以便用户可以继续他/她的查询。中显示的恢复用户对话的示例代码非常混乱，因为我们应该在调用init()方法之前获取restoreId，但我认为如果我们在index.html文件中关闭body标记之前调用init方法，根据他们的<em
浏览 7提问于2019-02-25得票数 2
我想将eventListener附加到动态创建的输入文本或其他对象。由于对象尚未出现在DOM中，或者对象不可见，因此将事件附加到这些对象将失败。在普通的Javascript或JQuery中有正确的方法来避免这个问题吗？
谢谢
浏览 3提问于2020-03-17得票数 0
回答已采纳
在我的角度视图中，我有一个输入字段和一些使用ng点击的可点击的东西。
当单击这些ng-单击时，是否有角度方式或简单的香草js方法来防止输入字段失去焦点(如果是在焦点中)？
浏览 5提问于2016-01-28得票数 5
回答已采纳
使用vanilla JS，我尝试创建一个off click -就像在中，如果主体被单击，而不是某个元素被单击，则关闭该元素。但是，当您单击指定的元素时，它会起作用(它不会关闭)，但当您单击该元素的任何子节点时，它会触发事件。我希望if语句包括该父元素的任何子节点，以及父节点本身。"NavSocial-trigger">Social</li>
<li cla
浏览 1提问于2016-11-27得票数 1
我需要知道用户何时决定关闭他所在的文档，所以我在不同的站点上找到了"beforeClose“事件。我有两个问题：
当我在我的文件中声明它时，第一次，事件被称为2x (单击时是1x，文档完全关闭时是1x )。它正常吗?当我关闭扩展名并重新打开它时，会再次声明该事件，并在每次关闭和重新打开扩展名时调用1x多(4x而不是2x)等等。我怎样才能只申报一次这个事件？类似于在
浏览 5提问于2022-03-15得票数 1
回答已采纳
2回答
面板打开关闭不起作用
、、、、
嗨，我有一个要求，当一些条件得到满足时，Jquery移动面板将被打开，我已经尝试关闭，打开面板，但那不起作用。type="text" name="fieldValue" placeholder="Type in an Value" size="90" />
<a href='#mypanel' onClick='javascript
浏览 1提问于2014-01-31得票数 0
我正在尝试在vanilla javascript中测试一个非常简单的增量函数。我试着寻找帮助来思考如何解决这个问题。我想也许我应该为按钮创建一个mock (而不是访问DOM元素)，并用酶模拟单击事件(但我不知道这是否真的有必要)。在我的搜索中，我能得到的只是使用React或Angular组件的Jest测试，这使我的问题变得更加复杂，因此我没有得到简单JS的答案。Jest文档也没有帮助。
浏览 0提问于2019-07-05得票数 3
问题是，当用户加载页面时，菜单已经被删除。另外，当下拉列表关闭并重新打开时，它会弹回屏幕的顶部，是否存在将其更改为？jQuery
<script type="text/javascript"
浏览 4提问于2014-07-18得票数 1
回答已采纳
3回答
在子弹出中，用户输入一些数据并单击“保存”。数据将保存到数据库中，弹出窗口将被关闭。父窗口将被刷新，在子弹出窗口中输入的数据将显示在父页面.中。如何在Javascript中完成(关闭子弹出并刷新父页面)？
浏览 7提问于2011-02-28得票数 7
2回答
我在2010年7月发现Paque的回应:删除您的脚本并替换为以下文档javascript：高级->文档处理->文档Javascripts.在弹出的对话框中，输入一个
浏览 4提问于2011-09-01得票数 0
1回答
如何在单击按钮时重新加载/刷新父组件。
在下面的代码中，我使用javascript vanilla (window.location.reload(false)刷新页面。
浏览 2提问于2022-06-29得票数 0
回答已采纳
2回答
然而，这个类给我带来了很多问题:1-当我打开一个窗口时，它会出现，当我关闭它并重新单击同一按钮时，它会加载两次(所以我需要单击两次才能关闭)有没有解决这个问题的方法？我目前所做的是:使用iframe；我现在唯一的问题是我无法加载链接在该iframe中的其他colorboxes。我正在使用内联类。在iframe中，我有一个"generate_2“按钮，里面有内联内容。一旦我点击第二个按钮，什么也不会发生。当我将第一个按钮设置为ajax时
浏览 1提问于2012-09-13得票数 0
我使用WebView在单窗口应用程序中向用户显示一些传入内容。在我关闭窗口并单击停靠图标以重新打开窗口之前，这种方法工作得很好。根据IB的说法，窗口在关闭时不会释放。
浏览 2提问于2011-10-29得票数 0
回答已采纳
我有一个div .layer，它使整个页面变暗以突出显示一个模式，但是当我触发事件时，占用100%屏幕有一个问题，就是原始浏览器的滚动条被删除了。在智能手机/平板电脑中，我在拍摄事件.layer").show(); 时没有发现任何问题，但在桌面屏幕上，浏览器的原始滚动条被删除，整个html文档向右移动，取而代之的是.。
浏览 3提问于2019-11-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
