JS: onfocus and onblur event application example (to)

2010-11-03  来源:本站原创  分类:Web  人气:216 

One. Onfocus (focus to the event)

When a text box has focus, the text inside it as "a good 123" Baidu search on the site as all the input box is automatically selected, this operation can be achieved using onfocus.

The following text box, when the mouse pointer moved over time, which have all been selected text:

This is how to do it? See the following code and explain:

<input type="text" name="url" value="http://www.gxblk.com" size="30" onmousemove="this.focus();this.select();">

Code, input tag embedded in the onmousemove (the mouse pointer over) the event JS statement, the equal sign after the this.focus () means the focus of its own; the focus of the logo is the text input cursor box will appear, but let it all be selected within the text, we have to spend this.select () statement, it means that the text box to select all the text.

II. Onblur (lost focus event)

We often will detect whether the text box has been entered correctly detect the user normally after clicking the submit button, in fact, the use of control loses focus, we can carry out the testing work in real time, this is the case, onblur event to send in handy.

The following example has four text boxes, if you do not have any click any one of them the operation, then nothing will happen, but when you click any one of them to have a focus (input cursor inside), if not entered anything and click somewhere else so that it loses focus, it will pop up a warning, give it a try -

Here is the code and explanation:

Form Code -

<form name="blur_test">
    <p> Name   <input type="text" name="name" value="" size="30"><br>
     Sex   <input type="text" name="sex" value="" size="30"><br>
     Age   <input type="text" name="age" value="" size="30"><br>
     Residential address   <input type="text" name="addr" value="" size="30"></p>

JS code -

<script language="javascript">

function chkvalue(txt) {
    if(txt.value=="") alert(" The content in the text box must be filled  !");


Explained -

Code form, each side frame of the code embedded in a onblur JS statement, they call JS code behind the custom function chkvalue (this), meaning that when the text box loses focus is called chkvalue () function ; this chkvalue () function to detect the text box is empty, if it is to pop up a warning window. This function has a parameter (txt), corresponding to a text box in front of the parameters of the function call (this) is itself.

  • JS: onfocus and onblur event application example (to) 2010-11-03

    One. Onfocus (focus to the event) When a text box has focus, the text inside it as "a good 123" Baidu search on the site as all the input box is automatically selected, this operation can be achieved using onfocus. The following text box, when t

  • Js中的onblur和onfocus事件应用介绍 2015-04-22

    html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用 html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. onfocus(获得焦点事件) 当一个文本框获得焦点时,它里面的文本就像"好123"网站上的百度搜索输入框那样全部被自动选中,这样的操作可以利用

  • OnFocus与OnBlur的例子区别 2013-12-15

    OnFocus与OnBlur的例子,大家可以运行下,看下区别. onfocus与OnBlur的例子 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JS和JQ的event对象区别分析 2013-11-20

    js和jq的event对象大同小异,本文简单对比下它们的'click'事件下的不同和应用,给有需要的小伙伴参考下 代码测试: <div id="test"><p>test text<p></div> <script src="vendor/jquery-2.1.1.js"></script> <script> test.addEventListener('click', functi

  • js in the click event (onkeydown, onkeypress, onkeyup) 2010-08-31

    JavaScript, onkeydown, onkeypress, onkeyup event is frequently used three hits to the three event execution order for the onkeydown -> onkeypress -> onkeyup. Which, onkeypress function keys on the system can not capture, such as backspace, the curso

  • 理解Node.js的事件循环(Event Loop)和线程池 2014-04-28

    Node的"事件循环"(Event Loop)是它能够处理大并发.高吞吐量的核心.这是最神奇的地方,据此Node.js基本上可以理解成"单线程",同时还允许在后台处理任意的操作.这篇文章将阐明事件循环是如何工作的,你也可以感受到它的神奇. 事件驱动编程 理解事件循环,首先要理解事件驱动编程(Event Driven Programming).它出现在1960年.如今,事件驱动编程在UI编程中大量使用.JavaScript的一个主要用途是与DOM交互,所以使用基于事件

  • JS键盘的键码(event.keyCode)图片版 2014-10-18

    js获取键盘按键的键码event.keyCode,下面则是键盘的键码分布,记录一下,以备不时之需 图片版:点击看大图 网上收集的KeyCode值方便大家查找: keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift_L keycode 17 = Control_L keycode 18 = Alt_L keycode 19 = Paus

  • JS和JQ的event对象对比和应用 2014-08-11

    代码测试: <div id="test"><p>test text<p></div> <script src="vendor/jquery-2.1.1.js"></script> <script> test.addEventListener('click', function(e){console.log(e);}, false), $('#test').on('click', fu

  • js window.onload explain the application of addEventListener 2010-10-08

    The implementation of conditions: the page is loaded Note that, if there are multiple winodws.onload, then only the most there is a force to resolve this approach are: 1, window.onload = function () (f (); f1 (); f2 (); ...) 2, if (window.addEventLis

  • js WEB page close event listener 2010-12-31

    capture window close event javascript There are two ways onbeforeunload (), onUnload () Usage in two ways: 1. Function window.onbeforeunload () {alert ("close window")} function window.onunload () {alert ("close window")} 2. OnUnload i

  • Introduction to Learning Jquery posts (d )---- js understanding of the event event target 2011-01-12

    When the DOM element in response to an event in a time element, most browsers will hold an event Event class object in the main area in the IE window the event object as an attribute of an object to manipulate. So in IE and other browsers to determin

  • js simulate user click event 2010-11-09

    var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false; if(ie){document.getElementById('a1').click()}//IE Processing else{var a=document.createEvent("MouseEvents");//FF Processing a.initEvent("click", true, tr

  • Js calls on the local application 2010-12-15

    <! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN"> <HTML> <HEAD> <TITLE> New Document </ TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author&q

  • common event in js 2009-03-03

    / / 1: onblur event occurs when the object loses focus function upperCase () ( var x = document.getElementById ( "fname"). value document.getElementById ( "fname"). value = x.toUpperCase () ) </ script> Enter your name: <input

  • Node.js事件循环(Event Loop)和线程池详解 2015-03-13

    这篇文章主要介绍了Node.js事件循环(Event Loop)和线程池详解,这篇文章比较浅显地探讨了有关事件循环的内部运作机制和技术细节,都是经过深思熟虑的,需要的朋友可以参考下 Node的"事件循环"(Event Loop)是它能够处理大并发.高吞吐量的核心.这是最神奇的地方,据此Node.js基本上可以理解成"单线程",同时还允许在后台处理任意的操作.这篇文章将阐明事件循环是如何工作的,你也可以感受到它的神奇. 事件驱动编程 理解事件循环,首先要理解事件驱动编

  • Code Complete, the use of JS 2010-08-01

    Super practical js Code Complete (I) Event source object event.srcElement.tagName event.srcElement.type Capture Release event.srcElement.setCapture (); event.srcElement.releaseCapture (); Events button event.keyCode event.shiftKey event.altKey event.

  • bs one of the development of common js 2010-06-06

    / / Bs one of the development of common js First, verify the type 1, digital certification within 1.1 Integer 1.2 integer greater than 0 (for the coming of the ID verification) 1.3 Verification of negative integer Integer not greater than 1.4 iMax 1.

  • JS应用之禁止抓屏.复制.打印 2013-12-01

    js 禁止复制js 复制js 禁止右键 复制文件js 禁止 js禁止选择 js禁止右键代码 项目需要禁止抓屏.复制.打印的要求,复制.打印做起来可能顺手一点网上各种各样的脚本俯首皆是.但抓屏怎么禁止?PrintScreen是一个特殊的键,它是没有keyCode的键,所以onkeydown变得毫无用处.不过换一种思路的话可会更好,我们从粘贴板着手采取曲线救国策略.代码如下: <script language="javascript"> window.setInterval(&

  • JS实现关键字搜索时的相关下拉字段效果 2014-07-20

    关键字搜索时有下拉字段,在使用百度时会遇到,本例讲述用js实现类似的效果 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>Hello World</title> <link href="style.css" r

  • javascript Summary (5) for setting element styles and elements of the event monitor 2010-03-30

    Catalog (1) the framework (b) file organization and code organizations (c) JS interact with FLASH (4) ajax partial refresh and RPC (E) for setting and monitoring elements of the event elements of style (F) the creation of page elements and the associ