<!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. 下载各个版本java （Java Development Kit）

    本文介绍怎么样下载各个版本java开发工具包. 方法/步骤   打开官方下载网址:http://www.oracle.com/technetwork/java/javase/downloads/ind ...

  2. centos7.x网卡bond配置

    本文摘抄自 https://www.cnblogs.com/liwanggui/p/6807212.html centos7网卡bond配置 centos7网卡bond配置 1 备份网卡配置文件2 使 ...

  3. 在服务端处理同步发送小消息的性能上Kafka>RocketMQ>RabbitMQ

    在发送小消息的场景中,三个消息中间件的表现区分明显: Kafka的吞吐量高达17.3w/s,远超其他两个产品.这主要取决于它的队列模式保证了写磁盘的过程是线性IO.此时broker磁盘IO已达瓶颈. ...

  4. tomcat源码阅读之生命周期（LifeCycle）

    一.事件机制流程: 1.     当外部事件源发生事件(比如点击了按钮,数据发生改变更新等)时,事件源将事件封装成事件对象Event: 2.     将事件对象交由对应的事件派发器Dispatcher ...

  5. java 多线程之：synchronized

    synchronized原理 在java中,每一个对象有且仅有一个同步锁.这也意味着,同步锁是依赖于对象而存在. 当我们调用某对象的synchronized方法时,就获取了该对象的同步锁.例如,syn ...

  6. python列表中的pop

    pop()将列表指定位置的元素移除,同时可以将移除的元素赋值给某个变量,不填写位置参数则默认删除最后一位. pop()根据键将字典中指定的键值对删除,同时可以将删除的值赋值给变量. a = [1, 2 ...

  7. 码出高效，阿里巴巴JAVA开发手册1.4.0

    码出高效,阿里巴巴JAVA开发手册1.4.0阅读笔记 一.编程规约(三) 代码格式// 关键词if与括号之间必须有一个空格,括号内的f与左括号,0与右括号不需要空格 if (flag == 0) { ...

  8. Linux 后台进程管理

    fg.bg.jobs.&.ctrl + z命令一. &加在一个命令的最后,可以把这个命令放到后台执行 ,如gftp &,二.ctrl + z可以将一个正在前台执行的命令放到后台 ...

  9. vs2017 编译JRTPLIB

    一. JRTPLIB简介 RTP 是目前解决流媒体实时传输问题的最好办法,而JRTPLIB是一个用C++语言实现的RTP库,它完全遵循RFC 1889设计,目前已经可以运行在Windows.Linux ...

  10. request-2高级用法

    会话对象 会话对象让你能够跨请求保持某些参数.它也会在同一个session示例发出的所有请求之间保持cookie cookie与session的区别 1.cookie数据存放在客户的浏览器上,sess ...