JS随笔记
来源:互联网 发布:win10设置元素数据出错 编辑:程序博客网 时间:2024/06/04 18:54
写JS时最好使用通用方法获取事件:
var e = event || window.event || arguments.callee.caller.arguments[0];
- HTML5的placeholder属性,在IE10以下版本不兼容的处理办法:
首先判断浏览器是否支持placeholder属性,如果不支持的话,就遍历所有input输入框,获取placeholder属性的值填充进输入框作为提示信息,同时字体设置成灰色。
当输入框获得焦点( focus )同时输入框内文字等于设置的提示信息时,就把输入框内清空;
当输入框失去焦点( blur )同时输入框内文字为空时,再把获取的placeholder属性的值填充进输入框作为提示信息,同时字体设置成灰色;
当输入框内有输入( keydown )时,此时输入框内的提示信息已经由focus事件清除,此时只需要把字体再恢复成黑色即可。
此方法的缺点是,不适用于加载完DOM时即获得焦点的输入框,因为在用户的角度,加载完页面时看到的获得焦点的那个输入框,它的提示文字是看不到的。
$(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.createElement('input'), placeholder=function(input){ var text = input.attr('placeholder'), defaultValue = input.defaultValue; if(!defaultValue){ input.val(text).addClass("phcolor"); } input.focus(function(){ if(input.val() == text){ $(this).val(""); } }); input.blur(function(){ if(input.val() == ""){ $(this).val(text).addClass("phcolor"); } }); //输入的字符不为灰色 input.keydown(function(){ $(this).removeClass("phcolor"); }); }; //当浏览器不支持placeholder属性时,调用placeholder函数 if(!supportPlaceholder){ $('input').each(function(){ text = $(this).attr("placeholder"); if($(this).attr("type") == "text"){ placeholder($(this)); } }); }});
2、做一张含有提示文字的图片作为input输入框的背景图,初始时获得焦点同时加载背景图;
背景图如下:
当输入框不为空时,去掉背景图;
当输入框为空时,加载背景图;
当用户键盘按键且输入框不为空( 输入字符 )时,去掉背景图;
当用户键盘按键且输入框为空( 删除字符 )时,加载背景图。
此方法的缺点是:需要为每一个提示文字不同的input制作背景图片,并且设置input的样式。
$(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder' in document.createElement('input'); if(!supportPlaceholder){ //初始状态添加背景图片 $("#uname").attr("class","phbg"); //初始状态获得焦点 $("#uname").focus; function destyle(){ if($("#uname").val() != ""){ $("#uname").removeClass("phbg"); }else{ $("#uname").attr("class","phbg"); } } //当输入框为空时,添加背景图片;有值时去掉背景图片 destyle(); $("#uname").keyup(function(){ //当输入框有按键输入同时输入框不为空时,去掉背景图片;有按键输入同时为空时(删除字符),添加背景图片 destyle(); }); $("#uname").keydown(function(){ //keydown事件可以在按键按下的第一时间去掉背景图片 $("#uname").removeClass("phbg"); }); }});
- js截取字符串,中英文都能用
/** * 将字符串截取为指定长度 * @param str:需要截取的字符串 * @param len: 需要截取的长度 */serv.cutstr = function(str, len) { var str_length = 0; var str_cut = ""; var str_len = str.length; for (var i = 0; i < str_len; i++) { a = str.charAt(i); str_length++; if (encodeURIComponent(a).length > 4) { //中文字符的长度经编码之后大于4 str_length++; } str_cut = str_cut.concat(a); if (str_length >= len) { str_cut = str_cut.concat("..."); return str_cut; } } //如果给定字符串小于指定长度,则返回源字符串; if (str_length < len) { return str; }};
- 判断字符串是否为undefined、null、空字符串、全为空格等:
/** * 判断字符串是否为空 * @param str 待判断的字符串 */adUpdate.isStrBlank = function (str) { if (!str || str == null) {//为null或者undefined return true; } if (typeof str == "string") {//是字符串 if (str.length == 0) {//长度为0 return true; } if (str.test(/^[ ]+$/)) {//全为空格 return true; } }};
0 0
- JS随笔记
- js随笔
- JS 随笔
- js随笔
- js随笔
- js随笔
- js随笔
- js 随笔1
- js 用法随笔
- JS 闭包随笔
- js随笔一
- Node.js 学习随笔
- js工作随笔
- js随笔小记
- js随笔1
- JS工作随笔04
- JS Imooce 随笔
- JS学习随笔
- Java clone() 浅克隆与深度克隆(转)
- 随笔记
- Android中一些配置文件的介绍
- 创建表、序列、索引和视图(转)
- Maven入门指北
- JS随笔记
- java枚举类使用详解(转)
- Scrollview布局不能满屏
- Spring入门
- Linux的10个最危险的命令
- 使用Thumbnails进行图片缩放
- C++中的const成员函数和const类对象
- Spring MVC程序中得到静态资源文件css,js,图片
- IIS的安装及配置