JS小插件-对输入框获取与失去焦点时的操作

对于html文件,用到最多的是<input>标签,用来供用户输入信息,然而,我们想要实现这样的效果:

当用户没输入内容的时候,输入框内有默认的内容,当用户点击输入框的时候,输入框就会清空默认的内容供用户输入,而当用户没有输入任何内容时就点击其他地方时该输入框又会出现默认的内容,这里用简单的代码实现了该功能

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-11-02 04:53:43

JS小插件-对输入框获取与失去焦点时的操作的相关文章

JS小插件之2——cycle元素轮播

元素轮播效果是页面中经常会使用的一种效果.这个例子实现了通过元素的隐藏和显示来表现轮播效果.效果比较简单. 效果图如下: 源代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> 5 <title> cycle demo </titl

JS小插件之1——pager 分页

学习JS大半年之久,第一次自己尝试写一些小插件,写法参考网上某位牛人写代码的思路. 此处代码写的是静态分页.如果需动态分页,还可以修改下.第一次写,还有很多地方可以优化.希望各位大牛踊跃拍砖. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> 5 <t

jquery对于输入框得到与失去焦点时的处理方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>帐号: <input type="text" name="" id="" value="" /></p>

js 小插件

avaScript 是一个在全球范围内都非常受欢迎的脚本语言,由 Netscape 的 LiveScript 发展而来,可用于 Web 开发.移动应用开发.服务器端开发等.它因简单.安全.动态和跨平台等特点而受到新老开发者的追捧.本文整理了一些基于 Javascript 的开源功能插件和框架,希望能给你的开发带来帮助. 一.MV* 框架和库 1.Angular JS Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架.模板以及数据绑定和丰富 UI 组件.它支持整个

自己写的一个Js小插件

这是效果图.上面一个过滤标签.下面弹出框,选择日,周,月.我的用途主要是报表查询的时候根据这3种类型来查询数据用的. 这里分享下代码. Js代码 (function ($) { $.extend($.fn, { DtFilter: function (setting) { var container = this.html('<span type="text" class="filterDiv"><i class="fa fa-filte

js小插件-html表单的静态验证

 html表单静态验证: 对于表单的验证,大多数时候都是交由服务器完成,那为什么在html中还要做这个事情呢?但是呢,如果把所有的信息都交由服务器处理,会加大服务器的负担,并且对于服务器来说一些不合法的信息验证完全没必要. 所以呢,在html中简单的验证一下表单是有必要的,一来是为了减轻服务器的负担,二来也是为了给用户的一些简单的操作提示,以输入合法的信息. 所谓的静态验证,就是再不需要服务器的情况下由html自身就可完成的验证,在html中我们可以简单的验证一下我们要提交的表单信息,验证通

获取文本框焦点时,选中其内容。

貌似只能用click事件了,focus 研究了很久,还是不行. 只知道focus 是鼠标按下的时候执行事件: click是鼠标按下然后松开的时候实行事件: jq事件都是由时间冒泡来完成的,还应该注意阻止冒泡,focus不行原因应该是事件冲突,导致不能选中文本框内容. 附加:js原生方法:

浮动【电梯】或【回到顶部】小插件:iElevator.js

iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null, btns: null, backtop: null, selected: '', sticky: -1, visible: { isHide: 'no', numShow: 0 }, speed: 400, show: function(me) { me.element.show(); }, h

javascript小技巧-js小技巧收集(转)

本文转载自:http://blog.csdn.net/ocean20/article/details/2498699 每一项都是js中的小技巧,但十分的实用! 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5.得