javascript 即使单击空白点也聚焦输入字段

z9zf31ra 于 2022-12-25 发布在 Java

关注(0)|答案(2)|浏览(134)

我目前正在为我的应用程序构建一个搜索栏。我一直在到处阅读关于聚焦输入字段的文档，我发现HTML有一个内置的功能“自动聚焦”，但我还没有能够找到一个解决方案，如何聚焦在输入字段上，例如我点击网页上的空白区域。

<input type="text" class="form-control srch-bar" id="myInput" onkeyup="myFunction()"   title="Type in a name" autofocus>

JavaScript

来源：https://stackoverflow.com/questions/74900719/focus-input-field-even-when-you-click-on-a-blank-spot

2条答案

按热度按时间

pcww981p1#

我假设你的搜索栏应该永久拥有焦点。即使用户点击了外面，焦点也不应该被移除。这基本上是一个非常糟糕的用户体验和糟糕的设计理念。尽管如此，我还是会给你展示一个可能的解决方案。
您已经找到了必需的属性autofocus。这将使您的输入字段在页面加载后自动获得焦点。现在您必须防止焦点被移除。您可以使用onblur事件来实现这一点。onblur事件在元素失去焦点时发生。当触发此事件时，您只需再次将焦点设置在输入字段上。

<input type="text" id="example" name="example" onblur="this.focus()" autofocus>

同样，我强烈建议不要使用这个实现，即使你认为它是你问题的解决方案，也会有更有用的方法。

赞(0）回复(0）举报 2022-12-25

wvmv3b1j2#

我希望这能有所帮助，我不会给予太多的解释，因为它是非常简单的。（代码中的注解）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Focus</title>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    outline: none;
    font-family: 'Poppins', 'system-ui', 'sans-serif';
    font-weight: 300;
}
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background: #e2e2e2; 
}
::-webkit-scrollbar-thumb {
    background: #9a9a9a; 
}
::-webkit-scrollbar-thumb:hover {
    background: #b6b6b6; 
}
body {
    width: 100vw;
    height: 100vh;
}
#wrapper {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 50px auto;
}
#wrapper > header {
    display: inline-grid;
    grid-template-columns: 70% 30%;
    align-items: center;
    justify-items: center;
    background: #e7e7e7;
    border-bottom: 1px solid #c9c9c9;
}
#wrapper > header > div {
    grid-column: 2/3;
}
#wrapper > header > div > input {
    border-radius: 10vmin;
    border: 1px solid #d7d7d7;
    padding: 5px 10px;
    background: white;
}
#wrapper > section {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#wrapper > section > div {
    width: 100%;
    flex: 0 0 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#wrapper > section > div:nth-child(2) {
    background: #53a2e5;
}

</style>
</head>
<body>
<section id="wrapper">
    <header id="_header">
        <div><input type="text" name="search" id="searchInput" placeholder="Search..."></div>
    </header>
    <section>
        <div onclick="focusInput()">function focusInput() called by inline onclick="" in this div element</div>
        <div>Click here to defocus</div>
    </section>
</section>

<script type="text/javascript">
/////////////////////////////////////////
// 1º Method
// Adding a event listener at some element, in that case : header
const headerEl = document.getElementById('_header');
const inputEl = document.getElementById('searchInput');
headerEl.addEventListener('click', function() {
    inputEl.focus();
});
/////////////////////////////////////////
// 2º Method
// Calling it inline by onclick attribute
function focusInput() {
    document.getElementById('searchInput').focus();
}
/////////////////////////////////////////
</script>
</body>
</html>

我在这里乞讨，在javascript上，我不知道这是否是更好的方法。

赞(0）回复(0）举报 2022-12-25

我来回答

javascript 即使单击空白点也聚焦输入字段

2条答案

相关问题

热门标签

最新问答