如何用JS让一个输入框获得焦点_框架

让输入框获取焦点：

方法1：<body onload="documentgetElementById('inputId')focus()">

方法2：

function init(){

documentgetElementById("inputId")focus();

}

例如：

我要获取焦点：<input type="text" name="test" id="test">

</body>

用自带的focus()就可以了

利用js中<input/>实现文本框默认获取输入焦点完整代码实现如下：

<html>

<head>

<meta >

//输入框获取鼠标焦点

function autoFocus(){

var pFocus = documentgetElementById("password");

pFocusfocus();

pFocusselect();

}

</script>

</head>

</form>

</div>

</body>

</html>

扩展资料：

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

参考资料：

JavaScript官方API接口-:focus

百度百科-JavaScript

W3cschool-获得字段焦点

<head>

body,ul,li{margin:0;padding:0}

ul{list-style:none;}

slide{

width:500px;

height:100px;

border:1px solid #ddd;

margin:20px auto 0;

position:relative;

overflow:hidden;

}

slide ul{

position:absolute;/相对于slide进行绝对定位/

width:1000px;/比slide宽度大一倍，做这种连续滚动效果的时候，要在后面把内容复制一份/

height:100px;

left:0;/可以改变该值让其动起来/

top:0;

}

slide ul li{

width:90px;

height:90px;

margin:5px;

background-color:#ccc;

line-height:90px;

text-align: center;

font-size:30px;

float:left;

}

btns{

width:500px;

height:50px;

margin:10px auto 0;

}

</style>

$(function(){

var $ul = $('#slide ul');

var left = 0;

var deraction = 2;//每次滚动的距离

//内容为两套li

$ulhtml($ulhtml() + $ulhtml());

//反复循环定时器，30ms动一下可以看起来比较平滑

var timer = setInterval(move, 30);

function move(){

left -= deraction;

//当第2套li完全显示出来的时候，整个移回原点重新移动，实现向左连续滚动

if(left < -500){

left = 0;

}

//瞬间跳回，实现向右连续滚动

if(left > 0){

left = -500;

}

$ulcss({left: left});

}

$('#btn1')click(function() {

deraction = 2;

});

$('#btn2')click(function() {

deraction = -2;

});

$('#slide')mouseover(function() {

clearInterval(timer);

});

$('#slide')mouseout(function() {

timer = setInterval(move,30);

});

})

</script>

</head>

<body>

</div>

<ul>

</ul>

</div>

</body>

鼠标移入要做的事情mouseover

鼠标移出要做的事情mouseout

<head>

<title>鼠标移入移出</title>

box{

width: 200px;

height: 200px;

background-color: gold;

margin: 100px auto 0;

}

son{

width: 100px;

height: 100px;

background-color: green;

}

</style>

$(function(){

/进入子元素也触发/

/$('#div1')mouseover(function() {

$(this)animate({marginTop: 50});//stop()

});

$('#div1')mouseout(function() {

$(this)animate({marginTop: 100});//stop()

});/

/进入子元素不触发/

/$('#div1')mouseenter(function() {

$(this)stop()animate({marginTop: 50});//

});

$('#div1')mouseleave(function() {

$(this)stop()animate({marginTop: 100});//

});/

/通过hover（mouseenter+mouseleave）实现简写/

$('#div1')hover(function() {

$(this)stop()animate({marginTop: 50});

}, function() {

$(this)stop()animate({marginTop: 100});

});

})

</script>

</head>

<body>

</div>

</body>

创建一个子元素促使鼠标移入到子元素才能移动

是由于时间mouse影响

则要使用mouseenter和mouseleave进行改变

也可以运用hover简化

autofocus

表单元素的值发生变化

<head>

<title>input框事件</title>

</style>

$(function(){

// //一开始就获取焦点，相当于设置了autofocus自动获取焦点了（HTML5 新增表单控件属性）

// $('#txt01')focus();

// //文本框获取焦点的时候（有光标闪烁的时候）

// $('#txt01')focus(function() {

// alert('focus');

// });

// //失去焦点的时候（光标离开的时候）

// $('#txt01')blur(function() {

// alert('blur');

// });

// //输入框内容发生变化的时候，失去焦点后触发，可用于注册时验证用户名是否已存在

// $('#txt01')change(function() {

// alert('change');

// });

//松开键盘按键就触发

$('#txt01')keyup(function() {

alert('keyup');

});

})

</script>

</head>

<body>

</body>

<head>

<title>jQuery其他事件</title>

</style>

// // JS原生写法

// windowonload = function(){

// }

// / /jQuery写法，等同于上面写法

// $(window)load(function(){

// })

// //ready的写法

// $(document)ready(function(){

// })

// //ready的简写

// $(function(){

// })

// 窗口改变尺寸的时候，会高频触发

$(window)resize(function() {

consolelog('3');

});

</script>

</head>

<body>

</body>

鼠标移入要做的事情mouseover

鼠标移出要做的事情mouseout

我知道对你来说什么叫做获取焦点，难倒你把文字选中了不就已经是获取到焦点了吗？按任意键的时候文本框的值就会改变，这已经表明你的文本框已经获取到焦点了

而且获取焦点

$("#123")live("blur",function(){

$(this)select();//为什么获得不到焦点

});

这段代码完全多于

需要准备的材料分别是：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：indexhtml。

2、在indexhtml的<script>标签中，输入js代码：

$('body')append(documentactiveElementid == "a" 'true': 'false');

$('#a')focus(function () {

$('body')append(documentactiveElementid == "a" 'true': 'false');

});

3、浏览器运行indexhtml页面，此时会发现false代表没有聚焦，点击聚焦后发现打印了true。

代码如下:

jquery实现方法

对于元素的焦点事件，我们可以使用jQuery的焦点函数focus(),blur()。

focus()：得到焦点时使用，和javascript中的onfocus使用方法相同。

如：

代码如下:

$("p")focus(); 或$("p")focus(fn)

blur()：和onblur一样。

如：

代码如下:

$("p")blur(); 或$("p")blur(fn)

实例

代码如下:

<form>

<label for="searchKey" id="lbSearch">搜神马？</label> 这里label覆盖在文本框上，可以更好的控制样式

</form>

jquery代码

代码如下:

$(function() {

$('#searchKey')focus(function() {

$('#lbSearch')text('');

});

$('#searchKey')blur(function() {

var str = $(this)val();

str = $trim(str);

if(str == '')

$('#lbSearch')text('搜神马？');

});

})

以上就是关于如何用JS让一个输入框获得焦点全部的内容，包括:如何用JS让一个输入框获得焦点、js中<input/>如何获得焦点、鼠标移出移入、 focus获取焦点和blur失去焦点的运用等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9616771.html

如何用JS让一个输入框获得焦点

发表评论

评论列表（0条）