鼠标,焦点事件

鼠标,焦点事件,第1张

onclick是点击事件,on表示当,click表示点击:

ondblclick(双击事件),和点击事件差不多

oncontextmenu 鼠标右键点击事件:

onmouseenter,onmouseover都是表示鼠标进入事件,onmouseleave,onmouseout都是鼠标离开事件,但是onmouseout 比 onmouseleave 先执行,而且如果元素里面存在子元素,鼠标在元素中移动时会反复触发 onmouseover 和 onmouseout,所以推荐使用onmouseenter,与onmouseleave。

onmousemove, 鼠标移动事件:

onmousedown是鼠标按下事件,

onmouseup是 鼠标d起事件,

这两个事件用法与上面相似,这里不再赘述。

焦点事件:

获得焦点事件:

onfocus

失去焦点事件:

onblur

案例:输入框获取和失去焦点时的变化(动态效果不好截屏)

阻止默认行为:

e preventDefault(),这里的e是事件函数的形参,表示的是参与动作的事件:

//给input添加如下事件 一开始默认设置内容为 请输入姓名 获得焦点输入内容后 清空

$(function(){

var n = $('#name');

nval('请输入姓名');

nfocus(function(){

$(this)val('');

})blur(function(){

$(this)val('请输入姓名');

})

});

focus是获取焦点事件 即用户输入时清除提示信息

或者给input标签加上 placeholder属性 该设置可以使得没有输入时显示默认内容 输入之后清除默认提示内容

<input name="username" placeholder="请输入姓名"/>

<html>

<head>

<script language="javascript">

function validateText(id,str){//参数是文本框的ID和值

if(str==""){//如果值为空,那么文本框获得焦点

documentgetElementById(id)focus();

}else{//不为空就d出值

alert(str);

}

}

</script>

</head>

<body>

<input type="text" name="txt" id ="txt" onblur="validateText(thisid,thisvalue);">

</body>

</html>

JSP中能监听到的事件都可以引发页面跳转,以下是各种监听事件及意义:

onCLick:监听鼠标单击事件。

onChange:监听文本内容或下拉菜单中的选项发生改变。

onFocus :监听获得焦点,例如文本框获得鼠标光标。

onBlur:监听失去焦点,例如文本框失去鼠标光标。

onMouseOver:监听鼠标悬停,例如鼠标停留在等所在的区域。

onMouseOut:监听鼠标移出,例如鼠标离开等所在的区域。

onMouseMove:监听鼠标移动,表示在<div>层等上方移动。

onLoad:监听网页文档加载事件。

onSubmit:监听表单提交事件。

onMouseDown:监听鼠标按下事件。

onMouseUp:监听鼠标d起事件。

简单一点的可以用 jQuery

但是需要导入 jQueryjs 文件 这个网上下一个就行了 很好用

$("#test的id")fous(function(){

$("#其他需要锁定标签的id")attr("disable","true");

});

复杂一点的你就自己手写 javascript

test 获得焦点,其他的 标签 添加属性 disable=“true”

readonly 和 disable 都可以 具体的就不解释了,可以百度的到

就是这样啊 你这个 在 页面处理行了啊 不用后台啊

用javascript就行了啊

参照这个,可以监听你的警告看确认键,然后使用focus函数,如下:

可以使用focus()函数来实现这个效果。

比如要定位的文本框为<input id='input' />,那么可以在页面加载完成之后,加上如下代码:

$('#input')focus();

这样光标就停在文本框内了

以上就是关于鼠标,焦点事件全部的内容,包括:鼠标,焦点事件、placeholder 在jsp中显示问题!!!、jsp一个文本框在失去焦点的时候,显示其输入的值,如果没有输入该文本框获得焦点等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-02
下一篇 2023-05-02

发表评论

登录后才能评论

评论列表(0条)

保存