需要准备的材料分别是:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html的<script>标签中,输入js代码:
$('body').append(document.activeElement.id == "a" ? 'true': 'false')
$('#a').focus(function () {
$('body').append(document.activeElement.id == "a" ? 'true': 'false')
})
3、浏览器运行index.html页面,此时会发现false代表没有聚焦,点击聚焦后发现打印了true。
焦点在HTML和JS中是只光标。
焦点在JS和HTML里是在页面上屏幕中闪动的小竖线,鼠标点击就可获得光标,Tab键可按照设置的Tabindex来进行切换焦点。
示例:
<divid="demo"></div>
<divid="test"></div>
<divid="one"></div>
<divid="two"></div>
<divid="three"></div>
<divid="fore"></div>
<divid="five"></div>
<divid="six"></div>
<script>
function$(id){
returndocument.getElementById(id)
}
$("demo").style.backgroundColor="green"
//调用方法
$("test").style.backgroundColor="blue"
$("one").style.backgroundColor="orange"
$("two").style.backgroundColor="red"
$("three").style.backgroundColor="purple"
$("fore").style.backgroundColor="#f6e71f"
$("five").style.backgroundColor="#5153ff"
$("six").style.backgroundColor="#ff1496"
//调用函数,并直接修改盒子的背景颜色
扩展资料
jquery判断input输入框的值
//输入框正在输入时
$("#ipt").on('input',function(){
if(!($('#ipt').val()=='')){
$(".cancle_ico").removeClass('hide')
}else{
$(".cancle_ico").addClass('hide')
}
})
//输入框得到焦点时
$("#ipt").on('focus',function(){
if(!($('#ipt').val()=='')){
$(".cancle_ico").removeClass('hide')
}else{
$(".cancle_ico").addClass('hide')
}
})
//输入框失去焦点时
$("#ipt").on('blur',function(){
if(($('#ipt').val()=='')){
$(".cancle_ico").addClass('hide')
}else{
$(".cancle_ico").removeClass('hide')
}
})
用自带的focus()就可以了
利用js中<input/>实现文本框默认获取输入焦点完整代码实现如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
//输入框获取鼠标焦点
function autoFocus(){
var pFocus = document.getElementById("password")
pFocus.focus()
pFocus.select()
}
</script>
</head>
<body onload="autoFocus()">
<div id="loginform">
<h1 style="font-size:1.5empadding:20px">输入密码</h1>
<form action="${pageContext.request.contextPath}/" method="post">
<input id="password" type="password" name="password">
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
扩展资料:
JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义 。
参考资料:
JavaScript官方API接口-:focus
百度百科-JavaScript
W3cschool-获得字段焦点