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

2024-10-02 14:23:30

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

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

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

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

一、基本目标

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

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

1、输入框功能

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

2、超级链接功能

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

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

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

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

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

二、制作过程

不用引入任何插件，直接开个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>

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


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


<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程序设计有所帮助。

JS如何实现在页面上快速定位（锚点跳转问题）

本文介绍了JS如何实现在页面上快速定位(锚点跳转问题),分享给大家,具体如下: 1. 锚点跳转简介锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到. 锚点跳转有两种形式: a标签 + name / href 属性使用标签的id属性在html 4.0以前,只有使用 <a> 标签的 name 属性才能创建片段标识符.id 属性的出现,使所有 HTML 或 XHTML 元素都可以是片段标识符.这是因为 id 标识符几乎可以用在所有的标签中.<a> 标签为了能够
JavaScript for in锚点的动态创建

测试for..in ") ; } //--> [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]  test anchor 跳转目标对象处 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] //状态栏文字的滚动测试状态栏字符的滚动 = msg.length) { seq = 0 ; window.status = "" ; window.setTimeout("scrollStr();",int
js 定位到某个锚点的方法

html页面内可以设置锚点,锚点定义 Html代码 <a name="firstAnchor">&nsbp;</a> 锚点使用 Html代码 <a href="#firstAnchor">跳至第一个锚点</a> 但对于js呢,在js中如何在完成一个操作后跳至页面的某个固定锚点呢 js中location.href可以跳转至某个url: 跳至(定位到)某个固定锚点的办法 1.location.href = &qu
JS锚点的设置与使用方法

本文实例讲述了JS锚点的设置与使用方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>锚点</title> </head> <body> <ul> <li><a href="javascript:vo
js 模仿锚点定位的实现方法

如下所示: <div class="designer-bg ov"> <div class="w-77 f-l designer-nav"> <ul id="scroll_nav"> <li class="designer-nav-li"><a href="" title="" data-nav="a">A
javascript 动态数据下的锚点错位问题解决方法

复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>用 Javascript 实现锚点(Anchor)间平滑跳转</title> <script language="javascript"> // 说明 :用 Javascript 实现锚点(Anchor)间平滑跳转 //
JavaScript返回网页中锚点数目的方法

本文实例讲述了JavaScript返回网页中锚点数目的方法.分享给大家供大家参考.具体如下: JavaScript返回网页中锚点的数目,下面的JS代码获取页面中的anchor数量 <!DOCTYPE html> <html> <body> <a name="html">HTML Tutorial</a><br> <a name="css">CSS Tutorial</a>
JavaScript组件焦点与页内锚点间传值的方法

本文实例讲述了JavaScript组件焦点与页内锚点间传值的方法.分享给大家供大家参考.具体分析如下: 上述的这两个小功能在一些新式的手机页面是很有用的. 如何光标放上输入框就触发事件,离开输入框就触发另一个事件呢?即使用户不输入任何东西-- 页间传值很简单,但在页内的锚点之间是如何传值呢? 一.基本目标有一个页面,上面有一个输入框,一个超级链接,这两个东西是没有任何关联的, 只是因为功能不大,所以把两个功能合起来写 1.输入框功能一旦把光标放上对话框背景就变成红色,一旦用户的鼠标点击其他地
JavaScript实现向OL列表内动态添加LI元素的方法

本文实例讲述了JavaScript实现向OL列表内动态添加LI元素的方法.分享给大家供大家参考.具体分析如下: JavaScript向OL列表内动态添加LI元素的方法,下面JS代码每次点击按钮都会想OL列表中动态添加一个LI <script type="text/javascript"> function addItem() { var myitem = document.getElementById("ItemToAdd").value; var my
JavaScript实现在页面间传值的方法

本文实例讲述了JavaScript实现在页面间传值的方法.分享给大家供大家参考.具体如下: 问题如下: 在 a.html 页面中,<form> 的 onsubmit 事件调用一个方法 foo( ),打开 b.html 页面的同时给 b.html 传递参数.方法 foo( ) 中需要传递变量参数到 b.html 页面,在 b.html 页面接受参数值,但不能使用服务器端技术. 解决代码如下: a.html页面如下: <html> <head> <title>
保证JavaScript和Asp、Php等后端程序间传值编码统一

在非英文字符集的页面上,如果使用Ajax方式进行数据交互的话,就必须要注意保证前后端数据的统一编码,否则,很容易就出现乱码! 在后端是ASP程序的情况下,保持前端Javascript和Asp之间传值的统一编码可以使用以下函数进行处理: 编码:escape(string) 解码:unescape(string) 这两个函数在JavaScript和Asp里都存在,而且功能完全一样,只要任何一端向另一端传数据,都先用escape进行编码,接收的一端用unescape进行解码即可保证Javascript
vue组件间传值的方法你知道几种

目录一丶父子组件传值二丶子父组件传值三丶兄弟组件传值四丶$parent/$children与ref 总结一丶父子组件传值先在父组件中给子组件的自定义属性绑定一个父组件的变量 <template class="father"> <child :自定义属性名="父组件的变量"></child> <template > 在子组件的props属性中可以取出父组件给的值,props中的变量用法和data中变量用法完
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法

但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能. 下面是具体的做法: 一:跳转到新页面,并且是在新窗口中打开时: 复制代码代码如下: function gogogo() { //do someghing here... window.open("test2.html"); } window是一个javascript对象,可以用它的open方法,需要注意的是,如果这个页面不是一相相对路径,那么要加http://,比如: 复
JavaScript实现焦点进入文本框内关闭输入法的核心代码

js实现焦点进入文本框内关闭输入法:imeMode 要用到的东西: imeMode:xxx 有四个参数 active 代表输入法为中文 inactive 代表输入法为英文 auto 代表打开输入法 (默认) disable 代表关闭输入法 <INPUT onfocus=" this.style.imeMode='active' " /> <INPUT onfocus=" this.style.imeMode='inactive' " /> &
JavaScript组件开发完整示例

本文实例讲述了JavaScript组件开发的技巧.分享给大家供大家参考,具体如下: 使用JavaScript,按照面向对象的思想来构建组件. 现以构建一个TAB组件为例. 从功能上讲,组件包括可视部分和逻辑控制部分:从代码结构上讲,组件包括代码部分和资源部分(样式.图片等). 组件的特点:高内聚,低耦合(不与其他代码逻辑交叉,可以继承,包含):封装性(隐藏私有方法和变量):可重用性(可反复多次使用,用来组装更复杂的应用). <html> <head> <meta http-e
asp.net实现取消页面表单内文本输入框Enter响应的方法

本文实例讲述了asp.net实现取消页面表单内文本输入框Enter响应的方法.分享给大家供大家参考,具体如下: 很早以前开发asp.net项目的时候遇到的:在一个服务器TextBox控件上按下 Enter键,页面回发刷新一遍.后来google一下,发现这是asp.net2.0为表单处理专门设置的"Enter key"功能,关于asp.net ajax表单的enter key,你可以查看这一篇<ASP.NET基于Ajax的Enter键提交问题>.前面给出链接的两篇都是叫我们怎
jQuery实现页面内锚点平滑跳转特效的方法总结

平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有"小尾巴",就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有"小尾巴". <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery实

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

相关推荐

随机推荐