永利官网ylg客户端My97 DatePicker,强盛的 JavaScript 日历控件

Beta4 更新和修正的内容(最后一个Beta版本,这个版本将持续比较长的时间)

实时监听文本框值变化是非常常见的功能,通常最简单的办法就是用keyup,keydown来实现,但是这种方法有两个问题,一个是当直接复制粘贴的时候没法监听到事件,另外一个问题是在移动端,使用删除键删除输入时候也无法监听到!

一、JavaScript鼠标事件

永利官网ylg客户端 1

JavaScript鼠标事件

  • 通常,事件处理器的命名原则是,在事件名称前加上前缀on。例如,对于click事件,其处理器名为onclick。对于事件名称,也是很好记忆的,顾名思义即可
  • [新增]支持Safari 3.0+, Opera 9.5(beta Build 9656)+
  • [修改]如果没有定义onpicked事件,当文本框值改变时,自动触发文本框的onchange事件
  • [修改]如果没有定义oncleared事件,清空非空的input时,自动触发文本框的onchange事件
    [修正]当设置dateFmt:’HH:mm’时,快速选择第一项失效
  • [修正]多层框架嵌套情况下有多个横滚动条时,横坐标定位不准的错误
  • [修正]Asp.net Ajax中回刷后有时不能显示日期选择框
  • [修正]iframe中,多语言情况下的一处错误

解决办法:

鼠标单击事件
  • 单击事件可谓JavaScript中最常用的事件了,例如点击某个按钮弹出一个提示框。这里大家一定要注意一点,单击事件并不是只有按钮才有,任何元素我们都可以为它添加单击事件!

<div id="btn">调试代码</div>
<script type="text/javascript"> 
    var e = document.getElementById("btn");
    e.onclick = function () { 
        alert("玩我么?");
    }
</script>

演示地址:  http://dpdemo.my97.net

1、使用onchange事件

鼠标移入和移出事件
  • 其实,
    onmouseover和onmouseout这2个事件其实是好基友关系,平常都形影不离。这2个事件都是共同使用来分别控制鼠标“移入”和“移出”2种状态的

<h1 id="lvye">绿叶学习网</h1>
<script type="text/javascript">
    var e = document.getElementById("lvye");
    e.onmouseover = function () {
        this.style.color = "red";
        this.style.borderColor="red"
    }
    e.onmouseout = function () {
        this.style.color = "black";
        this.style.borderColor = "black"
    }
</script>

分析:this.style.color = "black";
在这里this指向的是e元素节点,也就是说这句代码等价于:
e.style.color = "black";

下载1:

onchange事件是文本框内容改变并失去焦点的时候才触发。

鼠标按下和松开事件
  • 在JavaScript中,鼠标的按下和松开事件分别是onmousedown和onmouseup。又一对好基友闪亮登场

<div id="main">
    <h1 id="lvye">绿叶学习网</h1>
    <hr />
    <input id="btn" type="button" value="button" />
</div>
<script type="text/javascript">
    var btn = document.getElementById("btn");
    var e = document.getElementById("lvye");
    btn.onmousedown = function () {
        e.style.color = "red";
    }
    btn.onmouseup = function () {
        e.style.color = "black";
    }
</script>

下载2:

2、比较完美的解决办法:oninput和onproper

二、JavaScript键盘事件

  • 在JavaScript中,常用的键盘事件有3种:
    (1)onkeypress事件;
    永利官网ylg客户端,(2)onkeydown事件;
    (3)onkeyup事件;
  • JavaScript事件通过以下3个事件来捕获键盘事件:onkeydown、onkeypress与onkeyup。这三个事件的执行顺序如下:onkeydown
    → onkeypress → onkeyup。

oninput 是 HTML5 的标准事件,对于检测 textarea, input:text,
input:password 和 input:search
这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像
onchange
事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下:

onkeypress事件
  • 在JavaScript中,onkeypress事件是在键盘上的某个键被按下到松开整个过程中触发的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        function refresh() {
            //判断是否按下R键
            if (window.event.keyCode == 82) {
                location.reload();    //刷新页面
            }
        }
        //调用函数
        document.onkeypress = refresh;
    </script>
</head>
<body>
    <div>欢迎来到绿叶学习网!</div>
</body>
</html>
  • 其中“window.event.keyCode ==
    82”表示判断是否按R键(大写R)刷新页面。当我们按下R键,会发现页面被刷新了

永利官网ylg客户端 2

onkeydown事件
  • onkeydown跟onkeypress非常相似,也是在键盘的按键被按下时触发。但是这2个事件有一下2大区别:
    (1)onkeypress事件只在按下键盘的任一“字符键”(如A~Z、数字键)时触发,单独按下“功能键”(如F1
    ~
    F12、Ctrl键、Shift键、Alt键等)不会触发;而onkeydown无论是按下“字符键”还是“功能键”都会触发;
    (2)按下“字符键”会同时触发onkeydown和onkeypress这2个事件,但是这2个事件有一定顺序:onkeydown>onkeypress;

发表评论

电子邮件地址不会被公开。 必填项已用*标注