html5文本框获取焦点,文本框获得焦点和失去焦点的判断代码

文本框失去焦点事件、获得焦点事件

onBlur:当失去输入焦点后产生该事件

onFocus:当输入获得焦点后，产生该文件

Onchange:当文字值改变时，产生该事件

Onselect:当文字加亮后，产生该文件

onpropertychange 当属性改变发生该事件

无论粘贴 keyup onchange等，最为敏感

先来看javascript的直接写在了input上

代码如下:

jquery实现方法

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

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

如：

代码如下:

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

blur()：失去焦点时使用，和onblur一样。

如：

代码如下:

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

实例

代码如下:

搜神马？这里label覆盖在文本框上，可以更好的控制样式

jquery代码

代码如下:

$(function() {

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

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

});

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

var str = $(this).val();

str = $.trim(str);

if(str == '')

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

});

})

好了相当的不错吧

下面是一个简单的例子：

代码如下:

用户名：

密码:

第一种： html5

html5给表单文本框新增加了几个属性，比如：email,tel,number,time,required,autofocus,placeholder等等，这些属性给表单效果带来了极大的效果变化。

其中placeholder就是其中一个，它可以同时完成文本框获得焦点和失去焦点。必须保证input的value值为空，

placeholder的内容就是我们在页面上看到的内容。

代码如下：

代码如下:

第二种： jQuery

原理：让表单的val值等于其title值。

代码如下：

代码如下:

文本框获得焦点、失去焦点调用JavaScript

代码如下:

html5文本框获取焦点,文本框获得焦点和失去焦点的判断代码相关推荐

html5文本框获取焦点,CSS3实现文本输入框获取焦点高亮显示
有看到一些网站的表单提交页面中,当文本宽获取焦点时会渐渐呈现出高亮显示的效果.本文通过CSS3实现了文本输入框获取焦点高亮显示的效果.代码如下: CSS代码: input[type=text]:foc ...
(转)完美解决 Android WebView 文本框获取焦点后自动放大有关问题
完美解决 Android WebView 文本框获取焦点后自动放大问题前几天在写一个项目时,要求在项目中嵌入一个WebView 本来很快就完成了,测试也没有问题.但发给新加坡时,他们测试都会出现文本 ...
完美解决 Android WebView 文本框获取焦点后自动放大问题
前几天在写一个项目时,要求在项目中嵌入一个WebView 本来很快就完成了,测试也没有问题.但发给新加坡时,他们测试都会出现文本框聚焦时,网页面会放大(他们用三星手机测试的) 网上查了好久参考他的方法 ...
开发笔记:解决安卓GestureOverlayView手势和ListView点击事件、文本框获取焦点冲突的问题
要解决这个问题,首先要弄清楚几个问题: 1.onThouch事件的触发原理是怎样的? 2.GestureOverlayView的绘制手势的事件是在什么时候触发的? 3.父子嵌套的控件触发事件的顺序是怎 ...
java文本框获得输入焦点_文本框获得焦点和失去焦点的判断代码
文本框失去焦点事件.获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后, ...
文本框获取焦点后出现的边框，怎么去掉
文本框获取焦点后出现的边框,怎么去掉其实这个不是边框,而是轮廓!用CSS 去掉轮廓就行了! outline:none 属性定义及使用说明 outline(轮廓)是绘制于元素周围的一条线,位于边框边缘 ...
easyUI文本框获得焦点，失去焦点
easyUI帮助文档对于文本框的操作没有提供直接获得焦点,或者失去焦点的方法,我们可以采用以下写法来实现. 获得焦点: $('input',$('#文本框Id').next('span')).focu ...
html 点击文本框则选中,JS事件内容选中事件（onselect）选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。...
内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...
创建输入控件(input控件、文本框、密码框、单项选择、多项选择、重置与提交按钮的设置)
创建输入控件 input控件的相关概念 input控件的属性 input控件的类型文本框的设置密码框的设置单项选择的设置多项选择的设置重置与提交按钮的设置综合运用相关概念选择题及参考答案 ...

html5文本框获取焦点,文本框获得焦点和失去焦点的判断代码

html5文本框获取焦点,文本框获得焦点和失去焦点的判断代码相关推荐

最新文章

热门文章