focus 相关问题

如何在 tvOS 中对按钮焦点执行操作事件

我想在我的按钮处于焦点时执行某些操作，而不是在 tvOS 中手动点击它。 我有四个水平排列的 UIButton，当用户只关注其中一个时......

无法使用Qt.ClickFocus将焦点设置到ScrollView

我只是希望当我单击ScrollView 时我的TextField 失去焦点，但问题是scrollview 不接受使用Qt.ClickFocus 的焦点。 导入QtQuick 导入 QtQuick.Controls.Universal

如何获取下一次击键将写入的 INPUT 元素？

我有一些 HTML / JS 应用程序，我喜欢通过注入虚拟用户输入来测试。 我尝试使用 document.activeElement 来查找我将模拟输入推送到的 INPUT / TEXTAREA，但经常

Vue.js 3 在方法内使用 ref 对输入使用自动对焦

我使用 Vue2，但最近尝试了 Vue 3。 我有一个简单的问题： 我想将“焦点”设置为“ 我使用 Vue2，但最近尝试了 Vue 3。 我有一个简单的问题： <input ref="myinput" /> <button @click="submitData" /> 我想在“submitData”函数内部的“myinput”上设置“焦点”。 在 Vue 2 中它很简单（this.$refs ...），但在 Vue 3 中，他们让它变得复杂。 我看到了“设置”的示例，但对我来说没有用+我认为你只能从元素访问“值”。 有什么方法可以在方法内部的元素上执行“焦点”吗？ 如果有人提出这个问题，寻找在 Vue3 中设置特定元素的自动对焦的方法，您可以使用 Vue 自定义指令 来实现它 const { createApp, onMounted } = Vue; const app = createApp({}) // Register a global custom directive called `v-focus` app.directive('focus', { // When the bound element is mounted into the DOM... mounted(el) { // Focus the element el.focus() } }) app.mount('#app') <script src="https://unpkg.com/vue@next"></script> <div id="app"> <input /> <input v-focus /> <input /> </div> 您仍然可以使用 Vue 3 做同样的事情，但是如果您使用组合 api，则会有一些区别： 选项API： const { createApp } = Vue; const App = { data() { return { } }, methods: { submitData() { this.$refs.myinput.focus() } }, mounted() { } } const app = createApp(App) app.mount('#app') <script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script> <div id="app"> Vue 3 app <input ref="myinput" /> <button @click="submitData"> Submit </button> </div> 合成API： const { createApp, ref, onMounted, } = Vue; const App = { setup() { const myinput = ref(null) function submitData() { myinput.value.focus() } return { myinput, submitData } } } const app = createApp(App) app.mount('#app') <script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script> <div id="app"> Vue 3 app <input ref="myinput" /> <button @click="submitData"> Submit </button> </div> 在某些情况下，当输入隐藏在 v-show 或 v-if 下时，需要执行 nextTick 才能使焦点起作用。 <span v-show="!editMode" @click="handleEditionMode" > {{ content }} </span> <input v-show="editMode" ref="input" v-model="content" aria-describedby="item-content" name="content" type="text" tabindex="0" @focusout="editMode = false" @keydown.enter="editMode = false" /> const input = ref(null), editMode = ref(false); const handleEditionMode = () => { editMode.value = true; nextTick(() => { input.value.focus(); }); }; 这里缺少我找到的最简单的答案 <input type="text" autofocus /> 我试图在加载表单组件时选择特定的输入。 上面的例子没什么用，所以我自己想出来了。 这要简单得多，恕我直言。在已安装的钩子中添加 1 个引用标签和 1 行代码。 在您想要关注的项目上放置参考标签。这里我将其命名为“formStart”，但您可以随意命名。 <form @submit.prevent="createNewRoute"> <label for="code">Code</label> <input v-model="code" id="code" type="text" ref="formStart" /> <!-- REF TAG HERE --> <label for="type">Type</label> <input v-model="type" id="type" type="text" /> /* Other inputs hidden for simplicity */ <button type="submit">Add Route</button> </form> 参考 mounted 钩子中的 ref 标签并 focus() 它。 <script> export default { /* Other options hidden for simplicity */ mounted() { this.$refs.formStart.focus(); // FOCUS ELEMENT HERE }, }; </script> 另一个普通的解决方案是： document.getElementById("code")?.focus() 被召唤 onMounted <div v-if="openmodal" tabindex="0" v-focus @keydown.right="() => nextimage(1)" > </div> 我使用了@webcu的方法并添加了tabindex =“0”，它起作用了！ 在 Vue 3 Composable API 中，我发现最直接的解决方案是使用 document.getElementById()。诀窍是将 .focus() 调用包装在 Vue 的 nextTick() 中 /** set focus to predetermined HTML element */ const setFocusToElement = async () => { nextTick(() => { const element = document.getElementById('myInputId'); if (element) { element.focus(); } }); }; onMounted对我不起作用我使用了watchEffect： const input = ref<HTMLInputElement | null>(null); watchEffect(() => { if (input.value) { input.value.focus() } });

使用 MUI 背景时防止背景项目接收焦点

当使用 MUI 背景打开（自定义，非 MUI）对话框时，我们会调暗屏幕，但“灰显”项目仍然处于活动状态，并且用户可以使用键盘访问它们。 在下面

在页面开始 HTML 上将焦点设置在输入框上

我的 html 页面有问题。我想在页面加载时将焦点设置在第一个输入框上，但我的所有尝试都以失败告终。我不确定我做错了什么，因为我......

Jquery 实时模糊和实时对焦

我正在动态打开一个对话框。单击链接时，它会查找信息并将其显示在其中。 $('.comment').live('模糊', function(){ var split = (this.id).split("_"); var id = sp...

Chrome 版本使用 gtag 打破输入焦点

我在使用谷歌标签时有一个非常奇怪的行为。 并且此错误仅发生在1个指定的Chrome版本中。 测试环境： Chrome：116.0.5845.110（官方版本）（64 位） Reactjs

Flutter Focus onKeyEvent 触发按键按下和按键按下

Flutter 中的 Focus 小部件可以检测并处理 KeyEvent。但是，它将在按键按下和按键按下事件上触发（因此每次按下都会调用分配的回调两次）。给定一个 KeyEvent，如何...

跳转到移动版 Google 表格中的特定单元格？

嗯，任务非常简单：转到工作表的最后一行。 Apps 脚本在桌面 Web 应用程序（MacOS 上的 Google Chrome）中完美运行，但在移动设备（Android 12、本机 Sheet 应用程序

我可以运行“xterm -e MyApp”，并将焦点传递到新的 xterm 窗口吗？

如果我在终端会话中运行 xterm -e MyApp，则会弹出一个新的 xterm 窗口，运行 MyApp。我必须单击新窗口才能获得焦点。当我关闭 MyApp 时，窗口会关闭，但焦点不会重新...

在 Angular 7+ 上使用 Enter 键移动到 ng-template 下的下一个字段

我得到以下信息：无法读取未定义的属性（读取“焦点”） 因此，我使用 console.log(nextField.nativeElement) 控制台记录了 nextField.nativeElement 并得到了未定义 我的...

Alpine.js 焦点和 Keyup 事件

我有一个网页，使用 Alpine.js 和 Focus Plugin 在单击某个项目时打开模式，我还希望能够使用空格键和 Enter 键打开模式 它可以工作，但是当使用 en...

在React js中点击回车键时触发onblur事件

我有一个输入文本字段。当用户输入任何文本并单击输入按钮时，我需要激活模糊事件以删除焦点并验证 textinput 。 我有一个输入文本字段。当用户输入任何文本并单击输入按钮时，我需要激活模糊事件以删除焦点并验证文本输入。 <input type="text" style={{marginTop:'20%', marginLeft:'40%'}} value={value} onFocus={onFocus} onChange={e => setValue(e.target.value)} onKeyPress={handleKeyPress} /> 代替 onKeyPress，使用 onKeyDown 来检测 keyCode 事件。 <input type="text" style={{marginTop:'20%', marginLeft:'40%'}} value={value} onFocus={onFocus} onChange={e => setValue(e.target.value)} onKeyDown={(e) => this.handleKeyPress(event)} /> 函数会是这样的， handleKeyPress(e){ if(e.keyCode === 13){ e.target.blur(); //Write you validation logic here } } 使用 refs 和 this.inputRef.current.blur()。这是可行的解决方案。 class App extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); this.state = { value: "" }; } keypressHandler = event => { if (event.key === "Enter") { this.setState({ value: this.inputRef.current.value }); this.inputRef.current.blur(); this.inputRef.current.value = ""; } }; render() { return ( <div> <label>Enter Text</label> <input type="text" ref={this.inputRef} onKeyPress={event => this.keypressHandler(event)} /> <p>{this.state.value}</p> </div> ); } } ReactDOM.render(<App/>, document.getElementById('root')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id='root' /> 一行是： <input ... onKeyDown={(e) => (e.key === "Escape") && e.target.blur()} />

TextView 中点击的单词清晰焦点

我正在使用自定义的 LinkMovementMethod 类来自定义我的 onClick 文本，效果非常好，但当它单击可点击单词时，它仍然按下，如图所示 我怎样才能释放它 还有他...

如果我激活他，我怎样才能创建一个不位于前面或不获得焦点的表单

我想在 Visual Basic 中制作一个窗体，它无法获得焦点并且无法从另一个窗口带到前面 我已经搜索了很多，但我没有找到任何东西。 我尝试了这段代码，这让我...

如何从选定的卡片 Bootstrap 5 中删除轮廓

对于我的论文，我必须使用 Bootstrap 5 框架制作一个网站，所以我一直在摆弄“Bootstrap Cards”。当我单击卡片时，会出现边框。我想我可以修复它

如何关闭画布上的焦点以允许鼠标单击其下方可见的项目

Canvas 有一个 .focus() 方法，该方法应该能够获取一个对象，例如： myCanvas.focus({focusVisible: false}); 执行时没有错误，但仍会在

在输入组件中击键后失去焦点，但与内联 JSX 一起工作正常

嗨，我想构建一个具有多个输入的页面。然而，MyInput 组件在每次击键后都会失去焦点，而内联 JSX 则可以正常工作，如上所述。 MyInput 组件基本上是...

窗口初始化后聚焦文本框并选择所有文本

打开新窗口时，我想聚焦特定文本框并选择其中的整个文本。 我根据本教程进行了尝试：https://blogs.msdn.microsoft.com/argumentnullexceptionblogpost/...