JavaScript组件焦点与页内锚点间传值的方法


Posted in Javascript onFebruary 02, 2015

本文实例讲述了JavaScript组件焦点与页内锚点间传值的方法。分享给大家供大家参考。具体分析如下:

上述的这两个小功能在一些新式的手机页面是很有用的。

如何光标放上输入框就触发事件,离开输入框就触发另一个事件呢?即使用户不输入任何东西……

页间传值很简单,但在页内的锚点之间是如何传值呢?

一、基本目标

有一个页面,上面有一个输入框,一个超级链接,这两个东西是没有任何关联的,

只是因为功能不大,所以把两个功能合起来写

1、输入框功能

一旦把光标放上对话框背景就变成红色,一旦用户的鼠标点击其他地方则重新变为灰色的背景

JavaScript组件焦点与页内锚点间传值的方法

2、超级链接功能

向页面下方的bottom锚点通过get方法传递值text=1的值,bottom锚点下面有个已被禁用的输入框,不停在轮询地址栏上面的text参数

开始如果不点击,则没有text参数,所以输入框一直显示为null

一旦点击超级链接,下面的对话框在0.5秒之后,变为1,由于是毫秒级处理,所以用户的感觉是实时处理的,

JavaScript组件焦点与页内锚点间传值的方法

这个被disabled的上方还有一个back超级链接,清空页面的参数传递,再次把滚动条拉下来则又是显示为null。

请注意页内锚点间成功传值时,浏览器的url:

JavaScript组件焦点与页内锚点间传值的方法

二、制作过程

不用引入任何插件,直接开个html页面来写就可以了,请看下面的代码:

<!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">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>onfoucs</title>  

</head>  

  

<body>  

<!--定义个输入框,onfocus是获得焦点,一旦把光标放上输入框则马上触发getFocus()参数。onblur则是失去焦点,也onfocus刚好反过来。-->  

<p>  

<input type="text" onfocus="getFocus()"  onblur="loseFocus()"/>  

</p>  

  

<!--注意页内锚点传递参数的超级链接的语法,写用?接参数,再用#接锚点,多个参数则写成?texta=1&textb=2#bottom,用&链接-->  

<p>  

<a href="onfocus.html?text=1#bottom">锚点</a>  

</p>  

  

<!--这么多的li只是用来占行的~为了让大家看到锚点效果-->  

<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>  

  

<!--此超级链接相当于后退按钮-->  

<p>  

<a id="bottom" href="javascript:history.go(-1);">back</a>  

</p>  

  

<!--我就是那个被禁用的对话框-->  

<p>  

<input type="text" id="pollingtext" disabled="disabled"/>  

</p>  

  

</body>  

</html>  

<script>  

    /*一开始先把页面的背景颜色换成#eeeeee*/  

    window.onload=function(){  

        document.bgColor="#eeeeee";  

        Polling();  

        }  

      

    /*当对话框获得焦点就把背景颜色改成红色,反之则重新改成#eeeeee*/     

    function getFocus(){  

        document.bgColor="#ff0000";  

    }  

      

    function loseFocus(){  

        document.bgColor="#eeeeee";  

    }  

      

    /*这是取url get传值时的参数的专用正则表达式*/  

    function getUrlParam(name) {  

        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");   

        var r = window.location.search.substr(1).match(reg);    

        if (r!=null) return unescape(r[2]); return null;   

    }  

      

    /*不停地轮询,检查是否有get参数传递过来了*/  

    function synchronous() {  

        document.getElementById("pollingtext").value =getUrlParam("text");  

    }  

      

    function Polling(){  

        synchronous();  

        setInterval("synchronous()", 500);  

    }  

</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
AngularJS自动表单验证
Feb 01 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 #Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 #Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 #Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 #Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 #Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 #Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 #Javascript
You might like
php的计数器程序
2006/10/09 PHP
PHP新手上路(九)
2006/10/09 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
JS如何生成动态列表
2020/09/22 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
程序员机试试题汇总
2012/03/07 面试题
大学毕业后的十年规划
2014/01/07 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
刑事撤诉申请书
2015/05/18 职场文书
党支部对转正的意见
2015/06/02 职场文书
学校隐患排查制度
2015/08/05 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle