在输入标记上使用autofocus属性时,不会调用onfocus
在输入标记上使用autofocus属性时，不会调用onfocus。
autofocus属性是HTML5中的一个属性，用于在页面加载时自动将焦点设置在指定的输入元素上。当页面加载完成后，浏览器会自动将焦点设置在带有autofocus属性的输入元素上，以便用户可以直接开始输入。
然而，使用autofocus属性并不会触发onfocus事件。onfocus事件是在元素获得焦点时触发的事件，可以用于执行一些特定的操作或者验证用户输入。
如果需要在输入标记上使用autofocus属性，并且在获取焦点时执行一些操作，可以通过其他方式来实现。例如，可以使用JavaScript来监听元素的focus事件，并在事件触发时执行相应的操作。
以下是一个示例代码：
<input type="text" id="myInput" autofocus>
<script>
document.getElementById("myInput").addEventListener("focus", function() {
// 在获取焦点时执行一些操作
console.log("Input element focused");
});
</script>在上述示例中，当页面加载完成后，输入框会自动获得焦点，并且在获取焦点时会在控制台输出"Input element focused"。这样就可以在使用autofocus属性的同时，实现在获取焦点时执行自定义操作的需求。
推荐的腾讯云产品：腾讯云云服务器（CVM）
相关·内容
2回答
我正在尝试将输入限制为整数。我正在尝试传递step属性，当直接在HTML中使用时，它似乎可以工作，但我很难从react中传递它。下面是我的render方法，数值输入在底部。我遇到的问题是输入仍然接受小数。
render() {
const {
currentVariableValue,
type,
currentVariable,
variablePayload,
} = this.props
const lowHi = this.getLowHi()
const lowHiDisplay = `between
浏览 3提问于2018-09-28得票数 0
是否可以在输入中嵌套一个“字符”。就像这样：
<input type="hidden" name="breakme" value="" onfocus='alert(\'1\');' autofocus="true" />
我知道你可以这样做
<input type="hidden" name="breakme" value="" onfocus="alert('1');" autofocus="
浏览 1提问于2017-07-23得票数 1
回答已采纳
1回答
有一个要求，我需要得到输入框的旧值。
<input type ="text" name="" onFocus=(this.name=this.value) onchange='doSomething(this.value,this.name)'/>
这需要在两种情况下进行。
onFocus
当输入html元素呈现时
它能在自动对焦上完成吗?在代码行下面是有效的。
有一个要求，我需要得到输入框的旧值。
<input type ="text" name="" onFocus=(this
浏览 1提问于2015-04-24得票数 0
3回答
我被要求编写一些代码，使输入的占位符在onfocus时消失，在onblur时返回。 当我这样写代码的时候，它是工作的： myInput.onfocus = function () { code here } -- myInput.onblur = function () { code here }. 但是，当我尝试先定义这两个函数，然后调用它们时，它不起作用。 如下所示： function clrplaceholder(x) {
"use strict";
// storing the value of the placeholder
x.setAtt
浏览 37提问于2019-12-25得票数 0
回答已采纳
如何使用ReactJS组件将自动焦点HTML属性包含到输入中？
我尝试使用了一个React元素，其中包含一个带有自动焦点的输入。
<input className='EI-input' autoFocus='true' tabIndex='0'
name='username' type='text'
ref='inputUser' autoComplete='on
浏览 2提问于2015-08-13得票数 4
回答已采纳
我是在反应本地应用程序，我也使用typeScript。我有一个功能组成部分：
const Input: React.FunctionComponent<IInputProps> = ({
inputStyle,
placeHolderColor = EAppColors.DARK_GREY,
placeHolder,
value,
onChangeText,
autoFocus,
onFocus,
onBlur,
onSubmitEditing,
ref,
keyboardType = EKeyboardType.DEFAULT,
})
浏览 6提问于2021-04-16得票数 0
回答已采纳
1回答
我有一个输入字段(使用redux-form)：
<input
{...input}
autoFocus
onFocus={(e)=> {
var val = e.target.value;
e.target.value = '';
e.target.value = val;
}}
浏览 3提问于2020-05-09得票数 0
回答已采纳
我正在转换一个按钮组件与MouseEvent<HTMLElement>在反应使用钩子。但是，我现在在每个鼠标事件上都会得到一个RangeError: Maximum call stack size exceeded错误。
新代码是
const [isActive, setIsActive] = useState(false);
const [isFocus, setIsFocus] = useState(false);
const [isHover, setIsHover] = useState(false);
useEffect(() => {
i
浏览 3提问于2019-11-26得票数 1
回答已采纳
我目前正在构建一个"datatable"-ish搜索函数。当用户在搜索框中输入某些内容时，我想更新包含其值的div。
目前，我使用以下输入字段执行此操作：
<input type="text" id="IdSearch" onkeyup="Search()" value="<?php echo $searchtext; ?>" onfocus="this.value = this.value;" name="zoeken" autofocus>
onfocus
浏览 10提问于2015-03-11得票数 0
回答已采纳
我的工作是安卓电视应用程序，我希望集中在按钮(提交)，当完成按钮，点击键盘的第二个TextInput。
请帮助帮助如何专注于第二个textInput的按钮使用onSubmiteEditing来反应本地的安卓电视。
<View style={{flexDirection:'column',alignItems:'center'}} keyboardShouldPersistTaps="handled">
<TouchableHighlight
onPress={(
浏览 7提问于2022-06-28得票数 0
我有一个输入，用户输入关键字，一个函数被触发来获取数据。然后，数据被填充到输入下面的“建议结果”目录中。所有这些都运行得很好。
我试图让用户在任何时候单击输入或div (当可见时)时，它们都有焦点。当单击div中的一项时，将根据所选的项运行函数，并关闭菜单。如果他们点击任何东西，而不是输入或div，div应该隐藏或不显示。我一直在尝试在哪里放置onBlur、onFocus、onClick，但都没有成功。只是我想要的部分。
我有一个名为'inputFocused‘的状态属性，它最初被设置为false，当onFocus运行时，它被设置为true，布尔值确定是否显示div。
我尝试在将inp
浏览 11提问于2018-08-10得票数 0
2回答
我知道这听起来有点令人困惑，但我有一个angular应用程序，它应该只在带有条形码阅读器的移动设备上运行，条形码阅读器会自动在聚焦的输入字段中写入读取的内容。我设置了应用程序，以便当页面加载时，我的输入字段具有焦点，并且我希望软键盘不可见，这样用户就不能在此字段中手动写入。 流程应该如下所示: input -> autofocus -> (onFocus)="hideKeyboard()“ Autofocus是一个自定义指令，它将dom元素设置为ngOnInit中的焦点。 提前感谢您的任何提示。
浏览 16提问于2019-02-05得票数 0
当用户输入金额时，我需要将货币图标放在值的前面，但这并不容易。我花了一整天，但仍然没有找到理想的解决方案。我最好的方法是将子组件包装到TextInput中，如下所示：
<TextInput
style={SS.input}
placeholder={props.placeholder}
underlineColorAndroid='transparent' editable={!props.disabled}
keyboardType={keyboardTy
浏览 0提问于2019-12-12得票数 0
我有一个TextField，它有一个defaultValue，如下面的代码片段所示：
<TextField
autoFocus={props.autoFocus}
fullWidth
defaultValue={props.defaultValue}
value={text}
onKeyPress={handleKeyPress}
onFocus={(e) => e.target.select()}
onChange={handleChange}
/>
默认值的一部分包装在括号中，我希
浏览 14提问于2022-08-17得票数 0
我有一个简单的文本输入，如下所示：
<input
type="text"
value={listTitle}
onChange={handleChange}
autoFocus
onFocus={handleFocus}
onBlur={handleFinishEditing}
/>
handleFocus只做这个e.target.select()
onBlur只是分派了一个动作。(并设置状态，使其不再显示输入)
问题在于，对于handleFocus，我认为与onBlur一起使用，并不能很好地协同工作。
每次我输入文本
浏览 1提问于2019-03-24得票数 1
回答已采纳
2回答
这是我目前所拥有的：
<script>
function colour(x){
document.getElementById(x).style.border = "1px green solid";
}
</script>
<p>Email<span style="color:red">*</span><input type="email" name="email" autofocus required/></p>
<p>Na
浏览 0提问于2015-12-11得票数 1
我使用的是带有Rails 3.2.5的simple_form。我有一个看起来像这样的表单：
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {:class => 'form-vertical' }, :html => {:name => "new_user"}) do |f| %>
<%= f.error_notification %>
浏览 0提问于2012-12-09得票数 2
回答已采纳
1回答
我试图基于控制器变量来集中输入。它在控制台中正确地初始化打印value= false，并且变量是由控制器在视图中进行的，而不是在指令中。我正在使用玉/coffeescript或Id创建一个示例，但实际上是这样的：
控制器
$scope.autofocus = false
$scope.somefunction = ->
$scope.autofocus = true
指令.
'use strict'
angular.module('myapp')
.directive 'gsautofocus', ($timeout, $parse
浏览 1提问于2015-08-25得票数 0
回答已采纳
1回答
我正在努力解决的问题是，每当我单击budget-glyph-clear时，我仍然希望能够将注意力集中到输入字段并输入它。当输入应该集中时，我可以看到输入className对应于formControlDisplayStyle样式，但是我看不到输入到类型上的插入符号(这是我无法看到的)。
这是我的FormControl
<InputGroup className={formControlDisplayStyle}>
<FormControl
className='budget
浏览 0提问于2018-11-06得票数 0
回答已采纳
3回答
我的中有一个TextInput组件。我需要使字段是预先填充的408x810xxx，1-3和6-8位数字在字段中，他们的变化是禁止为用户。有人能给我推荐一下最好的方法吗？
<TextInput
style={[SS.input, styles.input]}
placeholder={props.placeholder} placeholderTextColor={theme.inputPlaceholder}
underlineColorAndroid='transparent'
浏览 3提问于2019-12-17得票数 4
回答已采纳
我正在用js编写一个天气应用程序，以便在函数式编程中进行练习。
在主页中，您有一个简单的输入标记，在该标签中，您要输入您想要的城市的名称。当你点击enter按钮时，IIFE (在代码段中)就会被解雇，并实际启动整个应用程序。
现在，我有一些与生活相关的问题，因为它可以工作，但我不太确定这些代码到底是如何工作的(也许它是用不好的baaaaaaaad实践编写的)：
生活怎么知道钥匙是不按的？好的，我已经在输入标签上注册了一个事件，但是它是写在生命周期内的。那么，生活是如何知道事件已经被解雇的呢？我是说，我不会把任何事情都传递给那个功能的。事件的登记难道不应该是人生之前的一步吗？
我想很明显我有点困
浏览 4提问于2017-08-29得票数 0
回答已采纳
这是我的代码。每当我在一个输入框上触发onFocus时，另一个输入框也会更改其输入类型。我只想让那个特定的框在聚焦时改变类型。 this.state = {type: 'text'};
onFocus() {this.setState({ type: 'time'});}
onBlur() {this.setState({type: 'text'});}
<Form.Control type={this.state.type} onFocus={()=>this.onFocus()} onBlur={()=>
浏览 23提问于2019-04-29得票数 0
回答已采纳
1回答
我试图将localStorage值user_id作为Bootstrap下拉列表的标题传递，但不确定它为什么不能工作。
在localStorage的帮助下，我试图将用户名显示为下拉列表项的标题/标题，无论用户在'user_id‘中输入什么，都应该用作下拉列表的标题/标题。
function validateLogin() {
var profile_name = document.getElementById('user_id').value();
localStorage.setItem("userID", profile_name);
浏览 3提问于2017-11-13得票数 0
回答已采纳
每次刷新页面(使用超时)时，输入值保持不变，但光标跳到值的开头。
我尝试过使用.click()而不是.focus() --它没有达到我想要的结果。
我在元素中添加了autofocus，但这也没有帮助。
编辑:我注意到这似乎是谷歌Chrome浏览器的一个问题，我在Safari上试过了，它按预期工作。如果有人有任何建议，使它在Chrome上工作，这将是非常感谢。
HTML标记
<div class="searchContainer">
<h4>Find your favourite songs, artist or albums.</h4>
浏览 0提问于2019-04-20得票数 1
回答已采纳
我有两种反应方式--本地人。其中一个完美地工作，另一个(在另一个组件中)有一个bug。当获得焦点时，表单中的TextInput保持模糊。
我制作的视频(见下面的gif )显示，每当我在输入中单击时，它就会得到焦点，然后紧接着就会模糊。
输入的代码(现在使用调试器)：
<TextInput value={group.name}
blurOnSubmit={false}
onBlur={() => console.log('I blur')}
onFocus={() => console.log('I focus')}
浏览 4提问于2016-01-07得票数 0
回答已采纳
我有一个输入字段，我想给你看个爆米花.
<input class="form-control popover_onfocus" type="text" name="username" id="username" placeholder="Username" value="<?php if (!$form_valid && !empty($_POST)){ echo $username;} ?>" data-toggle="popover" data-
浏览 6提问于2017-09-30得票数 1
回答已采纳
我目前有以下代码运行得很好：
import React, {
RefObject,
useReducer,
useRef,
useState
} from 'react';
import TextField from '@material-ui/core/TextField';
const MyComponent: React.FC = () => {
const input1Ref = useRef<HTMLInputElement>(null);
const input2Ref = useRef<HT
浏览 4提问于2019-11-04得票数 0
2回答
如何使输入始终是onFocus
、、、、
我有输入，我想始终保持它的onFocused，即使我模糊它和点击页面的另一部分，仍然保持专注。
首先我用这个
const inputReference = useRef();
const[foc,setFoc] = useState();
const focu =() =>{
const focuss = inputReference.current.onfocus
setFoc(focuss)
}
returrn(
<input ref={inputReference} />
//or
<input type=&#
浏览 14提问于2022-08-28得票数 0
回答已采纳
1回答
当我在输入框上使用dispatchEvent触发focus事件时，它的onfocus会被调用，但在UI上，输入框不是焦点。这种行为有什么原因吗？
var test = document.getElementById("test");
test.onfocus = function(event) {
console.log('focused');
}
var e = document.createEvent('Event');
e.initEvent("focus", true, true);
test.dispatchEven
浏览 4提问于2011-07-05得票数 7
回答已采纳
1回答
点击时如何传递输入焦点？
、、、
我正在为我的应用程序使用下一个js，并且正在设计一个搜索字段。一旦用户输入某项内容，建议就会出现，但是当输入栏不在焦点时，我想隐藏它。
当用户再次单击它时，我想将它显示出来。搜索建议包含路由，所以我不能使用onFocus和onBlur作为元素在注册单击时失去焦点，而路由只有在我发布时才会发生。
我也尝试过css，但是我无法注册焦点，或者有方法吗？
请帮帮我！！
下面是我的示例代码：
const [suggestionState,setSuggestionState] = useState(false);
<input type="input"
浏览 3提问于2021-08-27得票数 2
回答已采纳
我需要关注TextInput，而不需要打开键盘，因为在我的用例场景中，可能会有一个物理键盘连接到设备上，并且我可能希望在Android上启用虚拟键盘。
我想的解决方案是将autoFocus交给TextInput，在onFocus回调中，取消键盘。
然而，结果是TextInput也失去了焦点。
有什么可行的解决方案吗？
<TextInput
onChangeText={text => setState(text)}
value={state}
autoFocus
onFocus={() => {
console.log('physicalKeyb
浏览 3提问于2020-12-04得票数 0
回答已采纳
我在A ScrollView中使用了ScrollView，当我单击next时，它将转到next文本输入字段，但关闭keyboard.here是我使用的代码
<View>
<TextInput
maxlength={20}
autoFocus={true}
returnKeyType="next"
onFocus={() => this.setState({ isNameFocused: true })}
onBlur={() => {this.props.user_
浏览 3提问于2022-02-26得票数 0
回答已采纳
我正在使用material作为组件库。我有一个小对话框，其中有一个“恢复密码”按钮放置在表单的某处。-我注意到在添加了这个按钮之后，textfields中的"enter“命令变成了按钮的onClick命令。
表格简单地说是：
type PropTy = {
classes: any,
submit: (Event) => mixed;
handleClose: (Event) => mixed;
handleRequestPasswordRecover: (Event) => mixed;
};
function SigninForm
浏览 0提问于2019-05-30得票数 0
回答已采纳
1回答
我制作了一个简单的表单验证自定义钩子，由于某种原因，它只适用于页面中的两个输入中的一个。
这是我做的定制钩子。
export default function useForm(initialState) {
const [formValues, setFormValues] = useState(initialState);
const handleValue = (e) => {
const { name, value } = e.target;
setFormValues({
...formValues,
[name]: {
浏览 6提问于2021-06-14得票数 0
回答已采纳
1回答
我不确定为什么这不起作用-我想在导航栏中有一个文本输入-标题和一个按钮来清除"RightButton“中的输入。但是代码应该可以解释这一点:我有一个简单的Navigator (在这里简化)：
<Navigator
ref="navigator"
navigationBar={
<Navigator.NavigationBar
style={styles.nav}
浏览 2提问于2016-09-02得票数 0
3回答
我正在尝试用<input>呈现一个autofocus字段
<input type="text" autoComplete="off" autoFocus={true} className="form-control" />
但它被渲染成：
<input type="text" autocomplete="off" class="form-control">
而且输入不集中。
，为什么是？，我如何才能得到autofocus属性来呈现呢？
浏览 5提问于2020-02-13得票数 7
回答已采纳
当我选择了一个输入字段并点击一个按钮来改变占位符/ onblur时，会发生一件奇怪的事情。当我在浏览器中查看F12工具时，会创建一个新的HTML源文档，在单击按钮更改占位符之后，它只包含先前选择的占位符。 即。如果我选择输入字段"First Name“，并且我当前选择的语言是英语，在单击将onblur占位符更改为意大利语的按钮后，HTML文档只包含在onblur函数中设置的英文名字，而不包含其他内容(无HTML、无正文、无其他...)。 为什么会这样，又是如何发生的呢？我如何才能防止这种情况的发生。 你可以用这段代码重现这个问题。 1.)打开F12工具 2.)选择任意输入字段 3.)
浏览 12提问于2020-01-24得票数 1
回答已采纳
onFocus事件在页面加载时不断触发，当元素进入焦点时似乎不起作用。我只希望在输入进入焦点时触发警报，而不是在页面加载时触发
//Input
var input = document.getElementById('phonenumber');
//onfocus execute function
input.onFocus = alert('test')
浏览 0提问于2012-04-07得票数 0
回答已采纳
我正在侦听同一输入元素上的onFocus和onClick事件。onFocus应该总是将设置为true，onClick事件处理程序应该切换这个布尔值。
但是在单击时，这两个事件一开始都是用onFocus触发的，所以布尔值首先被设置为true，然后由onClick切换。我怎样才能改变这种行为？
我试图在stopPropagation事件处理程序中使用onClick。此外，设置isClicked标志也没有帮助。(可能是因为这两个事件同时触发)(请参阅JSFiddle)
let input = document.getElementById("input");
let isOpen =
浏览 1提问于2019-05-27得票数 0
我试图使用height和width of TextInput获取useRef，但始终获得null。
首先，我尝试了两种不同的方法来初始化引用：
const inputRef = useRef(React.createRef)
或
const inputRef = useRef(null)
我把它们配上了：
useLayoutEffect(() => {
console.log("inputRef.current.clientHeight", inputRef.current.clientWidth)
})
或
useEffect(() => {
浏览 4提问于2019-12-04得票数 1
回答已采纳
我有一个表单，它使用子组件和输入域。我使用props从父组件获取数据，但它没有将prop值添加到输入字段。控制台中没有错误。
父组件：
const {
address,
errors
} = this.state;
return (
<form noValidate autoComplete="off" onSubmit={this.onSubmit.bind(this)}>
<LocationInputGroup
errors={errors}
address={address}
/>
浏览 1提问于2019-12-03得票数 1
在输入TextFormField时，我想响应用户按下键盘上的“完成”按钮。
目前为止的代码：
TextFormField(
autofocus: true,
textInputAction: TextInputAction.done,
decoration: InputDecoration(
labelText: 'ENTER YOUR TASK'
),
),
浏览 6提问于2019-11-28得票数 1
回答已采纳
1回答
除非我不改变组件的大小(可调整大小)，否则AceEditor不会显示。
如果我添加任何其他HTML元素，如
有没有办法使Ace编辑器在没有任何库的情况下可调整大小。
<Resizable
defaultSize={{
width: 'auto',
height: 'auto',
}}
className="resizable-component"
>
<AceEditor
width="auto"
height=
浏览 14提问于2020-02-25得票数 0
回答已采纳
我构建了react本地应用程序。我创建了pintInput组件，它通过在道具中传递的输入数动态地创建textInput。
我试图使文字输入的颜色占位符改变，当它被污染时，它是黑色的，当它是模糊的红色时。
我将placeholderTextColor绑定为“侦听”以声明更改。当它onFocus时，我将状态设置为true，other false。
但我还是不工作，因为它不听变化。它让我看到了所有的红色。
import React, { Component } from 'react';
import {
View,
TextInput,
Platfo
浏览 3提问于2017-11-09得票数 0
回答已采纳
1回答
我想将属性disabled、required和autofocus添加到JavaSpringForms3.1中。多亏了 ，我找到了方法，但我无法让它为工作。
我们有一个表单实用程序库，它封装了Spring表单，这样我们就可以添加标签和其他东西。
想要的JSP：
<formUtil:formInputBox ... autofocus="true" />
期望输出HTML：
<label>...<input type="text" ... autofocus /></label>
这在我们的formUtil中可以作为J
浏览 5提问于2012-12-06得票数 4
回答已采纳
2回答
我正在使用一个简单的聊天脚本，需要一种方式清除文本字段后，按回车。
我让它在鼠标点击onfocus清除文本字段，但按键躲避我。另外，是否有一种方法可以同时使用一条命令来使代码更简洁呢？
<form onsubmit="chat.sendMsg(); return false;">
<input onfocus="if(this.value !== '') {this.value=''}" onblur="if(this.value == '')" type="tex
浏览 2提问于2015-07-19得票数 0
回答已采纳
我有几个文本框可以自动填充数据，我使用javascript函数一次清除文本框，然后恢复到只有在输入特定文本时才清除的javascript函数。
例如:标准输入为"ADDRESS“的文本框将自动填充"ABC123”，然后清除onfocus。如果文本框仍然是空的，那么onblur，它将返回"ADDRESS“。
这类似于的问题，但我无法让它起作用。有什么建议吗？
我的文本框只是ASP.NET文本框，onfocus/onblur事件设置在后面的代码中：
<asp:TextBox ID="txtAddress" Text="ADDRESS"
浏览 1提问于2013-10-02得票数 0
回答已采纳
我有一个Javascript代码，可以在我的组合框中处理onchange和onfocus事件。因此，它只显示由组合框上的用户选择的那个。
我有一个Javascript代码：
var prev = "";
function pagechange(topage) {
frompage = prev;
var page=document.getElementById('formpage_'+frompage);
if (!page) return false;
page.style.display='none';
page.style
浏览 2提问于2013-12-04得票数 1
回答已采纳
1回答
我有一个在页眉中放置搜索字段的页面。此输入使用autofocus属性自动将焦点放到字段中，以便用户可以立即开始搜索：
<html>
<head><title>autofocus issue</title></head>
<body>
<header>
<form method="post">
<input name="search" autofocus />
</form>
<
浏览 0提问于2017-01-13得票数 2
我有类似这样的控件： ? 我需要跟踪这个控件中任何元素的焦点。如果我聚焦输入或如果我聚焦(单击)日历图标，我想知道所执行聚焦。 我的想法是在输入+日历触发器的包装器上添加单击侦听器。它是某个div。 开箱即用，我无法将焦点侦听器添加到div中。为了实现这一点，我需要将tabindex=0添加到这个div。这个方法可以工作，但它有一个减号。 例如，我有一个带有许多控件的窗体。示例代码如下： <div class="container">
<input onfocus="onFocus()" />
<div tabin
浏览 14提问于2019-02-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
