Article Detail

让输入框获取焦点 JS

方法1：方法2： function init(){ document.getElementById("inputId").focus(); } 例如：我要获...

HTML 阅读 32.6万 1 分钟阅读 2015-11-09 00:56

方法1：

<body onload="document.getElementById('inputId').focus()">

方法2：

function init(){
    document.getElementById("inputId").focus();
}

例如：

<body onload="document.getElementById('test').focus()">
我要获取焦点：<input type="text" name="test" id="test">
</body>

Comments 评论区

广西南宁市 2017-10-28 14:44

div等标签获取焦点绑定keypress等事件

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title></title>
		<style>
			.box{
				width: 300px;
				padding: 30px 20px;
				background-color: #f4d5e8;
				margin: 50px;
				font-size: 24px;
				color: #ccc;
				text-align: center;
			}
			#box2{
				color: #4c9579;
				background-color: #d5f4e8;
			}
			.box:focus{
				border: solid 1px #d5e8f4;
				box-shadow: 0 0 5px 2px #d5e8f4;
			}
		</style>
	</head>

	<body>
		<div class="box" id="box1">我不能获得焦点</div>
		<div class="box" id="box2" tabindex="1">点我可以获得焦点。因为我有【tabindex】属性</div>
		<script>
			document.getElementById('box2').onfocus = function(){
				this.innerHTML = "现在请敲击键盘！！";
			}
			
			document.getElementById('box2').onblur = function(){
				this.innerHTML = "点我可以获得焦点。因为我有【tabindex】属性";
			}
			
			//能获得焦点的div才可以使用keypress等键盘事件
			document.getElementById('box2').onkeypress = function(e){
				this.innerHTML = "只有获得焦点，才能用keypress等事件。您按的是【"+e.key+"】。";
			}
			
			//没有焦点的div等普通dom元素  就算绑定也没用！
			document.getElementById('box1').onkeypress = function(e){
				alert('就算绑定了也没用！！');
			}
		</script>
	</body>
</html>

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。

⌂ ↓ ↑

操作提示