文本框js日历弹出

来源:互联网 发布:linux yum命令详解 编辑:程序博客网 时间:2024/06/05 22:32

现在很多应用软件,不管是 c / s 的还是 b / s 的软件,输入日期文本框都是做了安全处理的,好的做法也是用得最多的一种做法是当用户要编辑日期输入框时,  弹出一个精美的小万年历给用户选择, 这种做法既友好,又美观 ,这样用户录入的日期只能选,不能输,出错录几乎为0 。 c / s 的软件我就不讲了; 这里主要讲讲web的日期输入框,  web输入框获得焦点是弹出小日历,供用户选择  。 用法是先引用3个做好的 js 文件, 和一个 css样式文件,只需在日期文本框中写   :

  <input type="text" id = "calendar" readonly="readonly"  onfocus="calShow('calendar')">  

    这样运行时, 当日期文本框获得焦点时就可以弹出小日历供用户选择。

  这样写虽然可以,但是也有一个小瑕疵 ,就是 : 日期文本框第一次获得焦点时可以马上弹出小日历,   但是第二次开始弹出就有点迟疑,甚至不弹出  。 

 

  在此本人提出一个小建议  ,把上面的代码改成:

 <input type="text" id = "calendar" readonly="readonly"  onClick="calShow('calendar')">  

    我们不是用它的获得焦点事件,而使用日期文本框的单击事件  ,这样小日历的弹出效果就很好了,各位不信可以试试,  这是本人的实践经验。 

 

    至于弹出日历的几个组件: 3个js文件和一个cs文件大家需要的话可以找我要, 我的QQ号码 : 619899271      发邮件也行。   kangjie619899271@sohu.com

原创粉丝点击