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 相关文章推荐
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
javascript的内存管理详解
Aug 07 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
vue表单数据交互提交演示教程
Nov 13 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 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
example1.php
2006/10/09 PHP
Dedecms常用函数解析
2008/02/01 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
php服务器的系统详解
2019/10/12 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
Python之list对应元素求和的方法
2018/06/28 Python
Python使用gRPC传输协议教程
2018/10/16 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
Python小白垃圾回收机制入门
2020/06/09 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
pandas针对excel处理的实现
2021/01/15 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
结婚喜宴主持词
2014/03/14 职场文书
社会实践的活动方案
2014/08/22 职场文书
单位作风建设自查报告
2014/10/23 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
安全教育第一课观后感
2015/06/17 职场文书
Python实现视频中添加音频工具详解
2021/12/06 Python