<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script type="text/javascript" src="http://static.mtimg.net/js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

$(function(){

/*

    $lineSearchbg.each(function(){

        //搜索框 请输入目的地、主题或关键词

        $(this).find('.placeholder').focus(function(){

            var arrive = $(this).val();

            if(arrive == '请输入目的地、主题或关键词'){

            $(this).val('').css('color','#000');

            }

        });

        $(this).find('#arriveSearchText').blur(function(){

            var arrive = $(this).val();

            if(arrive == ''){

                $(this).val('请输入目的地、主题或关键词').css('color','#b5b5b5');

            }

        });

    });

*/

        //搜索框 请输入目的地、主题或关键词

        $('.placeholder').focus(function(){

            if( $(this).val() == $(this).attr("placeholder") ){

                $(this).val('').css('color','#000');

            }

        });

        $('.placeholder').blur(function(){

            if( $(this).val() == ''){

                $(this).val( $(this).attr("placeholder") ).css('color','#b5b5b5');

            }

        });

});

</script>

<style type="text/css">

input{width:400px;margin:10px;}

</style>

</head>

<body>

<input type="text" class="" placeholder="啊啊啊啊啊啊啊啊">有placeholder，没有class<br>

<input type="text" class="placeholder">没有placeholder，有class<br>

<input type="text" class="placeholder" placeholder="啊啊啊啊啊啊啊">有placeholder，有class<br>

<input type="text" default="有default"><br>

</body>

</html>

placeholder测试的更多相关文章

  1. 怎么修改placeholder字体的css样式

    修改palceholder内文字的css样式 ::-webkit-input-placeholder{ color: red; font-size: 20px; line-height: 50px; ...

  2. 修改 input中的placeholder的字体样式和颜色

    placeholder属性是css3中新增加的属性, 由于是新加入的属性因此对各大浏览器都不兼容: 因此在使用的时候要加兼容性 火狐:-moz-placeholder { /* Mozilla Fir ...

  3. 【HTML】placeholder中换行

    表示回车 表示换行 案例 <textarea rows="10" placeholder="测试换行 新的一行"></textarea>

  4. HTML5 placeholder实际应用经验分享及拓展

    QQ邮箱登陆(http://mail.qq.com) 如下截图啦: 我在上面一个demo类似原理上做了下修改,制作了一个这样子交互效果的demo,希望对有兴趣的同行能帮上点忙,您可以狠狠地点击这里:透 ...

  5. ng1.3+表单验证<AngularJs>

    前一篇文章说过,ng1.3+以后对于表单验证有了优化,它不再需要一个详细的表达式状态创建元素显示或隐藏. 例如:我们在ng1.3之前的版本都需要如下写法: <div class="er ...

  6. 让 select 的 option 标签支持事件监听（如复制操作）

    这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为 ...

  7. 了解HTML表单之13个表单控件

    目录 传统控件 button select option optgroup textarea fieldset legend label 新增控件 datalist keygen output pro ...

  8. React 点击按钮显示div与隐藏div，并给div传children

    最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...

  9. css之属性及剩余的选择符

    今天的课程加速了,比平时快了些,但觉得很不错.nice~ 属性选择符 E[att]       选择具有att属性的E元素. input[type]{color: #red;} <input t ...

随机推荐

  1. Linux系统nat模式联网——VM是12 系统是cantos7

    >点击还原默认设置,然后确定 >选择Vmnet8,VMnet信息自动选中NAT模式 记住子网IP和子网掩码 >点击NAT设置,记住网关IP >点击DHCP.记住IP范围 > ...

  2. .NET 中使用 TaskCompletionSource 作为线程同步互斥或异步操作的事件

    你可以使用临界区(Critical Section).互斥量(Mutex).信号量(Semaphores)和事件(Event)来处理线程同步.然而,在编写一些异步处理函数,尤其是还有 async 和 ...

  3. Comet OJ - Contest #2简要题解

    Comet OJ - Contest #2简要题解 前言: 我没有小裙子,我太菜了. A 因自过去而至的残响起舞 https://www.cometoj.com/contest/37/problem/ ...

  4. 初学者必读之AJAX简单实例2

    1.a前台页面的主体 b.添加script函数: 这个函数功能1:把文本框的数据传入到后台程序   2.再接收后台程序处理之后的数据,将其插入到页面 2.后台程序功能 软件测试

  5. hasura graphql-engine v1.0.0-alpha26 版本新功能

    hasura 发布了graphql-engine v1.0.0-alpha26 版本,有一些破坏的变动,以及方便的新特性 破坏性变动 order_by 从 order_by: id_asc 为 ord ...

  6. 转 oracle 学习- 用户权限角色

    创建和删除用户是Oracle用户管理中的常见操作,但这其中隐含了Oracle数据库系统的系统权限与对象权限方面的知识.掌握还Oracle用户的授权操作和原理,可以有效提升我们的工作效率. Oracle ...

  7. MSDN Windows XP Professional x64 Edition with SP2 +VL简体中文语言包+序列号

    [资源名称]---Windows XP Professional x64 Edition with SP2 - VL (English)[资源类型]---ISO镜像[资源语言]---英语+简体中文[杀 ...

  8. java 多线程之 线程优先级和守护线程

    线程优先级的介绍 java 中的线程优先级的范围是1-10,默认的优先级是5."高优先级线程"会优先于"低优先级线程"执行. java 中有两种线程:用户线程和 ...

  9. 转【Oracle】一款非常好用的trace文件分析工具

    [Oracle]一款非常好用的trace文件分析工具之一   北在南方 2016-04-14 11:23:58 浏览547 评论0 摘要: 介绍一款非常好用的10046分析工具--trca(Trace ...

  10. 分析报告:云之家V9 VS 钉钉3.5

    http://news.yesky.com/hotnews/1/244252501.shtml 1.市场调研 1.1 企业需求 笔者所在单位是一家中型企业,企业流程和信息化基础较为成熟.随着移动互联网 ...