jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
功能实现:
用户在输入文字时,如果能高亮显示正在输入的那个文本框的话,会更人性化些,下面就使用jQuery来实现。
实现原理:
在document加载完成后(ready),添加input的focus和blur事件,并进行增加和删除样式的操作。
代码示例:
代码如下:
<html>
<head><title></title>
<style type="text/css">
.redBack{}{
color:white;
background:red;
border:2px solid black;
}
</style>
<script language="javascript" src="jquery-1.1.4.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
$('input').focus(function(){
$(this).addClass('redBack');
//alert("hello");
});
$('input').blur(function(){
$(this).removeClass('redBack');
});
});
</script>
</head>
<body>
<input type="text" value="hello,shanzhu" id="myText">
<input type="text" value="hello,shanzhu" id="myText2">
<input type="text" value="hello,shanzhu" id="myText3">
<input type="text" value="hello,shanzhu" id="myText4">
<input type="text" value="hello,shanzhu" id="myText5">
<input type="text" value="hello,shanzhu" id="myText6">
</body>
</html>
根据测试的要求,在alert之后,要将光标定位到指定的位置。查阅之后发现:focus属性可以方便的做到。
alert("姓名不能为空!");
//由id定位到需要的焦点
$("#name").focus();
即在提示输出后,焦点回到输入项。类似的也可以加入对应的样式。能高亮显示正在输入的那个文本框的话,会更人性化些,下面就使用jQuery来实现。
在document加载完成后(ready),添加input的focus和blur事件,并进行增加和删除样式的操作。
相关推荐
-
js/jquery获取文本框输入焦点的方法
方法一. 复制代码 代码如下: function CheckForm() { if(document.form1.trainingName.value==""){ alert("培训班名称不能为空!"); document.form1.trainingName.focus(); return false;
-
JQuery设置文本框和密码框得到焦点时的样式
复制代码 代码如下: //设置文本框和密码框得到焦点时的样式 $("#tblReg input[type=text],#tblReg input[type=password]").focus(function () { $(this).addClass("myFocus"); }).blur(function () { $(this).removeClass("myFocus"); }); 注意中间用逗号隔开
-
表单类各种类型(文本框)失去焦点效果jquery代码
复制代码 代码如下: <SPAN style="FONT-SIZE: 18px">表单类失去焦点的效果</SPAN> 复制代码 代码如下: <script type="text/javascript"> $(function(){ $(":input").focus(function(){ //此处可获取各种表单如(:text/:button) $(this).addClass("focusa&quo
-
在js(jquery)中获得文本框焦点和失去焦点的方法
先来看javascript的直接写在了input上 复制代码 代码如下: <input name="pwuser" type="text" id="pwuser" class="input" value="楼盘账号" onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号')
-
jQuery 文本框得失焦点的简单实例
版本一 css代码部分: 复制代码 代码如下: .focus { border: 1px solid #f00; background: #fcc;} 当焦点获得时,添加focus样式,添加边框,并改背景色为#fcc html代码部分: 复制代码 代码如下: <body> <form action="" method="post" id="regForm"> <fieldset&
-
JQuery中使文本框获得焦点的方法实例分析
本文实例分析了JQuery中使文本框获得焦点的方法.分享给大家供大家参考.具体分析如下: 由于JQuery中获得的对象还是JQuery对象,对其使用focus()只是使该对象获得onFocus()函数,不能是对象获得焦点,所以要使对象获得焦点,应该调用DOM对象的focus 方法,即: $("#id")[0].focus(); 需要注意两个函数之间的区别: $("#id").focus(); $("#id")[0].focus(); 第一个是增加
-
jQuery实现回车键(Enter)切换文本框焦点的代码实例
以下是实现方法: 复制代码 代码如下: <script src="http://yige.org/static/js/j.js"></script>jQuery(function () { jQuery('input:text:first').focus();//直接定位到当前页面的第一个文本框 var $inp = jQuery('input:text');//所有文本框 $inp.bind('keydown', function (e) {
-
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
复制代码 代码如下: var Page_INIT = function () { $(document).bind("mouseover", function (e) {//鼠标移入 if (e.target.tagName.toUpperCase() == "INPUT") { var input = e.target; if (input.type == "text") {//如果是文本框 if (window.Page_FocusTimer
-
jQuery文本框得到与失去焦点动态改变样式效果
本文实例讲述了jQuery文本框得到与失去焦点动态改变样式效果.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body { font: nor
-
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
功能实现: 用户在输入文字时,如果能高亮显示正在输入的那个文本框的话,会更人性化些,下面就使用jQuery来实现. 实现原理: 在document加载完成后(ready),添加input的focus和blur事件,并进行增加和删除样式的操作. 代码示例: 复制代码 代码如下: <html> <head><title></title> <style type="text/css"> .redBack{}{ color:white
-
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
在我们开发过程中特别是用户注册时会有一个效果,就是文本框获取焦点清空提示,如果用户没有输入信息失去焦点赋值上我们的提示语. <html> <head> <meta http-equiv="content-type"content="text/html; charset=UTF-8"/> <script src="http://127.0.0.1/jquery.js"></script>
-
js光标定位文本框回车表单提交问题的解决方法
本文实例讲述了js光标定位文本框回车表单提交问题的解决方法.分享给大家供大家参考.具体分析如下: 当光标定位在辅助查找的文本框后回车,页面会出现方法的返回的json串. 原因:When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form. 翻译一下:当form中只有一个in
-
jQuery实现设置、移除文本框默认值功能
jQuery实现的文本框默认值感应鼠标动作: 本章节介绍一下如何利用jQuery实现文本框默认值感应鼠标动作的功能. 比如当文本框获取鼠标焦点的时候,默认值会被清空,当文本框没有输入内容,鼠标焦点离开的时候,又会恢复到默认值. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>我们</title> <sc
-
jQuery实现页面点击后退弹出提示框的方法
本文实例讲述了jQuery实现页面点击后退弹出提示框的方法.分享给大家供大家参考,具体如下: demo.js: jQuery(document).ready(function ($) { if (window.history && window.history.pushState) { $(window).on('popstate', function () { var hashLocation = location.hash; var hashSplit = hashLocation.s
-
jQuery+php实时获取及响应文本框输入内容的方法
本文实例讲述了jQuery+php实时获取及响应文本框输入内容的方法.分享给大家供大家参考,具体如下: 该程序能够查出可用余额: HTML部分: <input type="text" name="username" id="username" onkeyup="search_func(this.value);" /> <em id="mfee"></em> jquery部
-
jQuery实现的选择商品飞入文本框动画效果完整实例
本文实例讲述了jQuery实现的选择商品飞入文本框动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
-
jQuery实现批量判断表单中文本框非空的方法(2种方法)
本文实例讲述了jQuery实现批量判断表单中文本框非空的方法.分享给大家供大家参考,具体如下: 方法一: <script type="text/javascript"> /* * 批量验证表单非空 * 需要非空验证控件的样式class="mustadd" */ $(".mustadd").each(function(){ if($(this).val() == ''){ alert("该项不可为空!"); $(th
-
javascript和jquery实现设置和移除文本框默认值效果代码
这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: 复制代码 代码如下: <input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索" onfocus='if(t
-
JavaScript在ASP页面中实现掩码文本框效果代码
最近在做一个程序正好需要用到此方面,在网上找到过相应的程序,但用起来都非常恶,于是乎只好自己实现一个了. 首先实现两个函数用来操作光标: 复制代码 代码如下: // 得到一个文本框控件的当前光标位置 function getPos(obj) { obj.focus(); var workRange=document.selection.createRange(); obj.select(); var allRange=document.selection.createRange(); workR
随机推荐
- Prototype1.6 JS 官方下载地址
- AngularJS基础 ng-cloak 指令简单示例
- IOS仿今日头条滑动导航栏
- perl中的范围声明our-my-local介绍
- Shell脚本一次读取文件中一行的2种写法
- SQL Server 2008 数据库镜像部署实例之一 数据库准备
- jQuery实现table中的tr上下移动并保持序号不变的实例代码
- Linux 下目录文件权限(命令)的查看和修改
- 利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一)
- jquery插件lazyload.js延迟加载图片的使用方法
- JS计算网页停留时间代码
- ASP.NET MVC5网站开发之网站设置(九)
- android基本控件ToggleButton&Switch使用指南
- 用js获取元素属性的代码
- js判断一点是否在一个三角形内
- java使用正则表达为数字添加千位符的简单方法
- Java实现单例模式之饿汉式、懒汉式、枚举式
- Android中实现记事本动态添加行效果
- Android自定义View实现水波纹效果
- Android+SQLite数据库实现的生词记事本功能实例