focus 相关问题

setTimeout() 中 focus() 的正确语法是什么？

我想在显示其父 div 后立即将焦点赋予输入元素。为此，我需要设置一个小的超时，否则该元素将无法获得焦点。然而，我遇到了麻烦

React-phone-input-2：选择国家/地区代码后自动对焦不起作用

您能解释一下，选择代码国家后如何集中输入吗？在演示中它按预期工作，但我的不起作用...... 有一段PhoneInput组件的代码： 您能解释一下，选择代码国家后如何集中输入吗？在演示中它按预期工作，但我的不起作用...... 有PhoneInput组件的代码： <PhoneInput inputProps={{ autoFocus: true }} onChange={(e, action) => phoneChange(e, action)} localization={i18n.language === 'ru' && ru} placeholder={placeholder} value={phoneNumber} buttonClass={styles.phoneButton} inputClass={styles.phoneInput} dropdownClass={styles.phoneDropdown} searchClass={styles.phoneSearch} searchPlaceholder={searchHolder} searchNotFound={searchFind} country={country} disableSearchIcon={true} enableSearch={true} autocompleteSearch={true} jumpCursorToEnd={true} /> 我尝试将 inputProps 传递给 PhoneInput 组件，但它将输入集中在第一个挂载上；( 我想您的项目中安装了最新版本的react-phone-input-2（2.15.1或2.15.0）。 低于 2.14.0 的版本将为您完成这项工作。 您可以卸载当前版本： npm uninstall react-phone-input-2 并安装 2.14.0 版本，当您更改国家/地区时，可与 autoFocus 配合使用： npm install [email protected]

在 vscode 中为日志语句着色

我想知道是否可以更改代码中日志语句的颜色。无论如何要做吗？ 我希望它们变暗（有点像评论），这样就不会那么分散注意力，我可以更多地关注我的实际情况

在 svelte 中，我需要将焦点设置在输入元素上，但收到错误“input.focus 不是函数”

让inx1 =“空”； 让输入=“”； 函数handleClick() {input.focus(); } $: inx1 && handleClick(); <pre><code><script > let inx1 = "null"; let input =""; function handleClick() {input.focus(); } $: inx1 && handleClick(); </script> <textarea style="clear: both;">{inx1}</textarea> <br/> <input bind:this={input} placeholder="SET"/> <button on:click={handleClick}> Focus input</button> </code></pre> <p>如果我打开页面，我会收到错误：</p> <p>input.focus 不是一个函数</p> <p>如果我删除此代码：' && 处理点击() 它有效，当我单击按钮时，我可以将焦点放在输入元素上</p> <p>请帮忙！</p> </question> <answer tick="false" vote="0"> <p>在安装组件之前，不会设置<pre><code>input</code></pre>。我也不建议同时将变量设置为某种完全不同的类型，只需让它保持<pre><code>undefined</code></pre>并在与它交互之前进行检查：</p> <pre><code>let input; $: if (input && inx1) handleClick(); </code></pre> </answer> </body></html>

使用 HTML 属性禁用 showModal 自动对焦

据我所知，showModal() 方法运行以下步骤，最终将焦点集中在 HTML 对话框中的元素（强调我的）： 令 subject 为调用该方法的对话框元素...

如何在 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 文本，效果非常好，但当它单击可点击单词时，它仍然按下，如图所示 我怎样才能释放它 还有他...