focus 相关问题

Focus表示当前选择用于接收输入的图形用户界面的组件。

考虑一个 QWidget 窗口，当鼠标离开该窗口时会触发什么事件？该窗口上有 QLineEdit 字段，并且它们有用于输入建议的完成器 (QCompleter)。实际...

qt focus mouseevent qwidget

回答 1 投票 0

Vue 3 和 Vitest 焦点输入在组合 API 的测试中将 document.activeElement 设置为 HTMLBodyElement

给定一个 Vue 3 组件 <question vote="0"> <p>给定一个 Vue 3 组件</p> <pre><code><template> <input id="input" type="text" @focus="handleOnFocus($event)" /> </template> <script setup type="ts"> const handleOnFocus = () => { console.log('Component document.activeElement:', document.activeElement) } </script> </code></pre> <p>并测试：</p> <pre><code>import { mount } from '@vue/test-utils' import { expect } from 'vitest' import AarghOmg from './AarghOmg.vue' describe('AarghOmg', () => { let wrapper: any beforeEach(() => { wrapper = mount<typeof AarghOmg>(AarghOmg, { attachTo: document.body }) }) it('outputs activeElement', () => { wrapper.find('#input').trigger('focus') console.log('Test document.body.innerHTML:', document.body.innerHTML) expect(true).toBe(true) }) }) </code></pre> <p>控制台.log</p> <pre><code>Component document.activeElement: HTMLBodyElement {} Test document.body.innerHTML: <div data-v-app=""><input id="input" type="text"></div> </code></pre> <p>我希望 <pre><code>document.activeElement</code></pre> 成为输入，而不是 body 元素。这在浏览器中可以正常工作，因此包装器和测试框架存在问题。</p> </question> <answer tick="false" vote="0"> <p>看起来 Vitest 并不实际与 DOM 内部交互，所以</p> <pre><code>wrapper.find('#input').trigger('focus') </code></pre> <p> 正在触发 Vue 组件上的 @focus 事件，但实际上并未将焦点设置在 JS Dom 中的 DOM 元素上。 </p> <p>解决方法是重构我们的代码，使其具有一个映射到聚焦状态的变量和一个输入<pre><code>ref</code></pre>，然后触发事件，例如</p> <p>Vue 3 组件</p> <pre><code><template> <input id="input" ref="input" type="text" @focus="handleOnFocus()" /> <button id="button" @click="blurInput()">Blur focus</button> <div v-if="isFocussed" id="is-focussed">Is focussed!</div> </template> <script setup type="ts"> const input = ref(null) const isFocussed = ref(false) const handleOnFocus = () => { isFocussed.value = true } const blurInput = () => { if (isFocussed) { isFocussed.value = false input.value.blur() } } </script> </code></pre> <p>并测试</p> <pre><code>import { mount } from '@vue/test-utils' import { expect } from 'vitest' import Hooray from './Hooray.vue' describe('Hooray', () => { let wrapper: any beforeEach(() => { wrapper = mount<typeof Hooray>(Hooray) }) describe('input focus/blur interaction', () => { it('and no interaction, input should not be focussed', () => { expect(wrapper.find('#is-focussed').exists()).toBeFalsy() }) it('and input focus triggered, input should be focussed', async () => { await wrapper.find('#input').trigger('focus') expect(wrapper.find('#is-focussed').exists()).toBeTruthy() }) it('and button clicked, input should not be focussed', async () => { await wrapper.find('#input').trigger('focus') await wrapper.find('#button').trigger('click') expect(wrapper.find('#is-focussed').exists()).toBeFalsy() }) }) }) </code></pre> </answer> </body></html>

javascript vue.js vuejs3 focus vitest

回答 0 投票 0

JTable 单元格确实通过鼠标单击获得焦点

我有一个简单的表格和面板中的一个按钮。当我单击表格单元格时，我可以对其进行编辑，但该单元格没有焦点。我希望能够保存单元格内容（如果它被...更改）

java swing jtable focus selection

回答 1 投票 0

CSS - 焦点在任何浏览器上都不起作用为什么？

嗨，我真的从来没有遇到过这个问题，但今天我真的不明白为什么焦点不起作用 - 我尝试在不使用 js 的情况下构建一个自定义开关 --- 它看起来不错并且与鼠标...

css browser focus

回答 1 投票 0

React.js -- 输入字段 -- 输入字母“c”或“n”时失去焦点

所以我在 MaterialUI 的 MenuItem 内有一个输入字段，并且该 MenuItem 在 Menu 内。由于某些奇怪的原因，只有在输入字母“c”或＆q时，输入字段才会失去焦点......

reactjs input material-ui focus

回答 2 投票 0

webbrowser.open 窃取焦点，如何避免

在 Windows 上，调用 webbrowser.open 会窃取例如键盘输入焦点，并将其设置到新打开的网页浏览器选项卡。有没有办法避免这种情况，那就是：后台打开页面？

python focus python-webbrowser

回答 1 投票 0

Osmdroid：单击时显示和隐藏标记描述

我正在使用 Android Studio 用 Java 编写一个应用程序。我已经使用 osmdroid 显示了地图，添加了一些叠加层以显示特殊位置上的标记，并添加了标题和描述......

java focus hide overlay osmdroid

回答 2 投票 0

使用 :focus 而不使用按钮或链接？

是否可以在没有按钮或链接的情况下使用 :focus 来聚焦某些内容？我试图将代码放入“不允许”按钮的游戏中，当我尝试使用是否可以在没有按钮或链接的情况下使用 :focus 来聚焦某些内容？我正在尝试将代码放入“不允许”按钮的游戏中，当我尝试使用 <a href="#" class="button"> （如下面的代码所示）时，如果我想发送到此链接，它只会给我一条消息。我想知道我是否可以做些什么来“绕过”通过链接收到的消息或简单地使用其他东西。我想要的是让我的内容在单击时显示并在单击屏幕上的某个位置时消失。 .morebuttonbox { height: 60px; width: 70px; background-image: repeating-linear-gradient( 90deg, #ecd0ff, white 1px, transparent 0, transparent 50%); background-size: 3px 3px; background-color: #fcf8f8; position: absolute; margin-top: 260px; border: 1px solid black; border-color: white #ae9cb9 #8b7c94 #7d6f85; } .button { font-size: 14px; background: #e0e0e0; padding: 2px; width: 50px; text-align: center; margin-left: 9px; margin-top: 18px; border: 1px ridge black; border-color: white #ae9cb9 #8b7c94 #7d6f85; position: absolute } .contentbox2 { background: blue; height: 130px; width: 301px; border: 1px solid black; border-color: white #ae9cb9 #8b7c94 #7d6f85; position: absolute; margin-top: 190px; margin-left: 69px; z-index: 1; opacity: 0; } .morebuttonbox:has(.button:focus)~.contentbox2 { opacity: 1; z-index: 10; } <div class="morebuttonbox"> <a href="#" class="button"> more </a> </div> </div> <div class="contentbox2"> <div class="byi"> <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px; border: 1px solid black; border-color: white #ae9cb9 #8b7c94 #7d6f85;">byi</span> text text text text text text text text text text text text text ... <div class="dni"> <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px; border: 1px solid black; border-color: white #ae9cb9 #8b7c94 #7d6f85;">dni</span> text text text text text text text text text text text text text ... </div> </div> </div> 在现代浏览器中，是的，应该可以将焦点放在锚点、按钮和其他表单元素之外的元素上。例如，一个简单的跨度应该可以工作...只要它具有 tabindex 属性： .morebuttonbox { height: 60px; width: 70px; background-image: repeating-linear-gradient( 90deg, #ecd0ff, white 1px, transparent 0, transparent 50%); background-size: 3px 3px; background-color: #fcf8f8; position: absolute; margin-top: 260px; border: 1px solid black; border-color: white #ae9cb9 #8b7c94 #7d6f85; } .button { font-size: 14px; background: #e0e0e0; padding: 2px; width: 50px; text-align: center; margin-left: 9px; margin-top: 18px; border: 1px ridge black; border-color: white #ae9cb9 #8b7c94 #7d6f85; position: absolute } .contentbox2 { background: blue; height: 130px; width: 301px; border: 1px solid black; border-color: white #ae9cb9 #8b7c94 #7d6f85; position: absolute; margin-top: 190px; margin-left: 69px; z-index: 1; opacity: 0; } .morebuttonbox:has(.button:focus)~.contentbox2 { opacity: 1; z-index: 10; } <div class="morebuttonbox"> <span href="#" class="button" tabindex="1"> more </span> </div> </div> <div class="contentbox2"> <div class="byi"> <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px; border: 1px solid black; border-color: white #ae9cb9 #8b7c94 #7d6f85;">byi</span> text text text text text text text text text text text text text ... <div class="dni"> <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px; border: 1px solid black; border-color: white #ae9cb9 #8b7c94 #7d6f85;">dni</span> text text text text text text text text text text text text text ... </div> </div> </div>

html css focus

回答 1 投票 0

失去对一个输入的关注会影响所有输入

我创建了一个带有验证功能的申请表，要求用户在单击远离焦点框或错误消息之前在框中输入正确的信息...

css reactjs validation input focus

回答 1 投票 0

使用 :focus 通过按钮显示某些内容

我有一个关于：焦点的问题。我想要一个按钮/文本在单击时显示，但我真的很难做到这一点。我尝试了几种方法，但我可以我有一个关于:focus的问题。我想要一个按钮/文本，单击时显示 <div class="contentbox2">，但我真的很难做到这一点。我尝试了多种方法，但我只能使内容框在单击时显示，而不能将其与按钮“连接”。我想要的是单击按钮后显示 div，然后单击屏幕上的任意位置时消失。 .morebuttonbox { height: 60px; width: 70px; background-image: repeating-linear-gradient( 0deg, #ecd0ff, #ecd0ff 1px, transparent 0, transparent 50%); background-size: 8px 8px; background-color: #fcf8f8; position: absolute; margin-top: 260px; border: 1px solid black; border-color: white #ae9cb9 #8b7c94 #7d6f85; } .morebutton { font-size: 14px; background: #e0e0e0; padding: 2px; width: 50px; text-align: center; margin: auto; margin-top: 16px; border: 1px ridge black; border-color: white #ae9cb9 #8b7c94 #7d6f85; } .contentbox2 { background: white; height: 130px; width: 301px; border: 1px solid black; border-color: white #ae9cb9 #8b7c94 #7d6f85; position: absolute; margin-top: 190px; margin-left: 69px; z-index: 1; opacity: 0; } .byi { width: 270px; height: 50px; word-break: break-word; margin-left: 15px; margin-top: 10px; } .dni { width: 270px; height: 50px; word-break: break-word; margin-top: 20px; } .more:focus~.contentbox2 { opacity: 1; z-index: 10; } <div class="morebuttonbox"> <div class="morebutton"> <a href="#" class="more"> more </a> </div> </div> <div class="contentbox2"> <div class="byi"> <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px; border: 1px solid black; border-color: white #ae9cb9 #8b7c94 #7d6f85;">byi</span> text text text text text text text text text text text text text ... <div class="dni"> <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px; border: 1px solid black; border-color: white #ae9cb9 #8b7c94 #7d6f85;">dni</span> text text text text text text text text text text text text text ... </div> </div> </div> 请参阅我对您的主要问题的评论。一种解决方案是使用 :has 选择器，然后将容器的同级作为目标： .morebuttonbox { height: 60px; width: 70px; background-image: repeating-linear-gradient( 0deg, #ecd0ff, #ecd0ff 1px, transparent 0, transparent 50%); background-size: 8px 8px; background-color: #fcf8f8; position: absolute; margin-top: 260px; border: 1px solid black; border-color: white #ae9cb9 #8b7c94 #7d6f85; } .morebutton { font-size: 14px; background: #e0e0e0; padding: 2px; width: 50px; text-align: center; margin: auto; margin-top: 16px; border: 1px ridge black; border-color: white #ae9cb9 #8b7c94 #7d6f85; } .contentbox2 { background: white; height: 130px; width: 301px; border: 1px solid black; border-color: white #ae9cb9 #8b7c94 #7d6f85; position: absolute; margin-top: 190px; margin-left: 69px; z-index: 1; opacity: 0; } .byi { width: 270px; height: 50px; word-break: break-word; margin-left: 15px; margin-top: 10px; } .dni { width: 270px; height: 50px; word-break: break-word; margin-top: 20px; } .morebuttonbox:has(.more:focus)~.contentbox2 { opacity: 1; z-index: 10; } <div class="morebuttonbox"> <div class="morebutton"> <a href="#" class="more"> more </a> </div> </div> <div class="contentbox2"> <div class="byi"> <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px; border: 1px solid black; border-color: white #ae9cb9 #8b7c94 #7d6f85;">byi</span> text text text text text text text text text text text text text ... <div class="dni"> <span style="background-color:#ecd0ff;color:#7d6f85;padding:1px;padding-left:5px;padding-right:5px; border-radius: 3px; border: 1px solid black; border-color: white #ae9cb9 #8b7c94 #7d6f85;">dni</span> text text text text text text text text text text text text text ... </div> </div> </div>

html css focus

回答 1 投票 0

Android：如何根据焦点禁用 EditText

我正在做一个有两个 EditText 的应用程序。我想做的是，如果您单击其中一个并在其上书写，则另一个必须擦除它所具有的任何内容，并且只显示提示字符串。我正在尝试用...

android focus android-edittext

回答 1 投票 0

网站不再识别弹出窗口名称。 JavaScript

告诉我这是否有意义。多年来我一直通过弹出窗口访问网站。使用 window.open('https://example.com',mypopup,参数); 我单击主窗口中的一个按钮，...

javascript popup window focus

回答 1 投票 0

防止聚焦于特定元素 jQuery

好吧，我有一个奇怪的需求。我并不是试图将焦点捕获在特定的 div 内，而是试图阻止它进入特定的其他 div。我有一个脚本可以将 div 上的类从“