创建JS文件 placeholderfriend.js

(function($) {
/**
* 牛叉的解决方案
*/ var placeholderfriend = {
focus: function(s) {
s = $(s).hide().prev().show().focus();
var idValue = s.attr("id");
if (idValue) {
s.attr("id", idValue.replace("placeholderfriend", ""));
}
var clsValue = s.attr("class");
if (clsValue) {
s.attr("class", clsValue.replace("placeholderfriend", ""));
}
}
} //判断是否支持placeholder
function isPlaceholer() {
var input = document.createElement('input');
return "placeholder" in input;
}
//不支持的代码
if (!isPlaceholer()) {
$(function() { var form = $(this);
var elements = form.find("input[type='text'][placeholder]");
elements.each(function() {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (pValue) {
if (sValue == '') {
s.val(pValue);
}
}
}); elements.focus(function() {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (sValue && pValue) {
if (sValue == pValue) {
s.val('');
}
}
}); elements.blur(function() {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (!sValue) {
s.val(pValue);
}
}); var elementsPass = form.find("input[type='password'][placeholder]");
elementsPass.each(function(i) {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (pValue) {
if (sValue == '') {
var html = this.outerHTML || "";
html = html.replace(/\s*type=(['"])?password\1/gi, " type=text placeholderfriend").replace(/\s*(?:value|on[a-z]+|name)(=(['"])?\S*\1)?/gi, " ").replace(/\s*placeholderfriend/, " placeholderfriend value='" + pValue + "' " + "onfocus='placeholderfriendfocus(this);' ");
var idValue = s.attr("id");
if (idValue) {
s.attr("id", idValue + "placeholderfriend");
}
var clsValue = s.attr("class");
if (clsValue) {
s.attr("class", clsValue + "placeholderfriend");
}
s.hide();
s.after(html);
}
}
}); elementsPass.blur(function() {
var s = $(this);
var sValue = s.val();
if (sValue == '') {
var idValue = s.attr("id");
if (idValue) {
s.attr("id", idValue + "placeholderfriend");
}
var clsValue = s.attr("class");
if (clsValue) {
s.attr("class", clsValue + "placeholderfriend");
}
s.hide().next().show();
}
}); });
}
window.placeholderfriendfocus = placeholderfriend.focus;
})(jQuery);

2在html文件中直接引用该文件路径即可

<script src="Content/jquery/dist/placeholderfriend.js"></script>

3 在IE10 以下实现效果

UI设计文本框解决Placeholder的在IE10 以下 IE 9 IE8 IE 7 的兼容问题的更多相关文章

  1. 文本框的placeholder属性

    在文本框中添加placeholder属性,用于文本框处于未输入状态时,模糊显示输入提示,当用户进行输入时,不需要删除该提示文字. 如: <input type="text" ...

  2. .NET开源工作流RoadFlow-表单设计-文本框

    点击表单设计器工具栏上的文本框按钮,会弹出文本框属性对话框: 绑定字段:该文本框与表单属性设置中选择的表的某个字段绑定(该文本框中的值将会保存到该字段中). 默认值:该文本框的初始化值. 宽度:文本框 ...

  3. 微信内置浏览器H5 弹出键盘 遮盖文本框解决办法 Fixed失效

    if(/Android [4-6]/.test(navigator.appVersion)) { window.addEventListener("resize", functio ...

  4. 设置文本框的 placeholder 的颜色

    使用方法: 选择器类型::-webkit-input-placeholder input::-webkit-input-placeholder{ color:rgba(144,147,153,1); ...

  5. (一)UI设计的一些常识

    一.概述 新版本的Xcode似乎框架不明示. UIView:屏幕上看得见摸得着的东西.视图.控件.组件. UIView是一个容器,能容纳其他UIView. UIViewController用来控制UI ...

  6. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  7. 手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法

    手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法 最近碰到Android微信内置浏览H5页面,因为其中的文本输入框(input)放置在靠近页面的中下方,点击文本框以后,则输入框会被弹出的手机 ...

  8. xmlplus 组件设计系列之三 - 文本框

    文本框是页面中最常用的输入组件,它的默认使用方式如下: <input type='text'/> 当然,这里的 `type='text' 可以略去不写.大部分情况下,使用默认的文本框作为输 ...

  9. 小tip:FireFox下文本框/域百分比padding bug解决——张鑫旭

    一.问题描述 我是流体布局控,经常会遇到文本框以及文本域宽度100%自适应显示的情况. 如下效果图: 在窄屏下,上面的文本框宽度也要跟着外部宽度变小. 难点对于文本框或者文本域,光标最好距离左侧边缘有 ...

随机推荐

  1. Html Agility Pack - API

    Html Agility Pack - APIParserSelectorsManipulationTraversingWriterUtilitiesAttributes HTML Parser HT ...

  2. 推荐系统 BPR 算法求解过程

    数据假设: 每个用户之间的偏好行为相互独立 同一用户对不同物品的偏序相互独立 则优化问题为极大化如下目标: [Reference] 1.论文翻译:BPR:面向隐偏好数据的贝叶斯个性化排序学习模型 2. ...

  3. [Spring学习笔记 6 ] Spring JDBC 详解

    项目使用maven管理,pom.xml和项目组织如下: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xs ...

  4. YAML中重复的KEY的判断

    package com.test.util; import java.io.BufferedReader; import java.io.FileInputStream; import java.io ...

  5. umdh windbg分析内存泄露

    A.利用工具umdh(user-mode dump heap)分析:此处以程序MemoryLeak.exe为例子 1.开启cmd 键入要定位内存泄露的程序gflags.exe /i memroylea ...

  6. 微信公众平台HTTPS方式调用配置免费https服务器

    微信公众平台数据传输安全,提高业务安全性,公众平台将不再支持HTTP方式调用.避免影响正常使用中含有HTTP方式调用的服务,请开发者尽快调整,将现有通过HTTP方式调用的切换成HTTPS调用,平台将于 ...

  7. MySQL执行mysql_install_db初始化

    # ./mysql_install_db \ > --defaults-file=/etc/my.cnf \ > --basedir=/data/mysql \ > --datadi ...

  8. Dapper MySql DateTime 异常

    实体类 字段类型 DateTime? ,MySQL数据库中字段类型 datetime NULL , 使用dapper扩展读取,报异常:Error Parse column: ** - Object. ...

  9. 利用 PowerShell 分析SharePoint WebApplication 体系结构

    之前一篇文章<两张图看清SharePoint 2013 Farm 逻辑体系结构>谈到Web Application,Content Database,Site Collection的关系. ...

  10. 替代crontab,任务计划统一集中管理系统cronsun简介

    一.背景 crontab 是 Linux 系统里面最简单易用的定时任务管理工具,相信绝大多数开发和运维都用到过.在咱们公司,很多业务系统的定时任务都是通过 crontab 来定义的,时间长了后会发现存 ...