2个有焦点时文字消失或变淡效果

zoukankan html css js c++ java

2个有焦点时文字消失或变淡效果

有焦点时文字消失。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>请输入关键字查询 - 豪情</title> </head> <body> <input type="text" name="" id="txt1" value="请输入关键字查询" /> <script type="text/javascript"> var oTxt = document.getElementById('txt1'); var bWrite = true; oTxt.onfocus = function(){ if(bWrite){ this.value = ''; bWrite = false; } } oTxt.onblur = function(){ if(this.value == ''){ this.value = this.defaultValue; bWrite = true; } } </script> </body> </html>

有焦点时文字变淡。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>请输入关键字查询加强版 - 豪情</title> <style type="text/css"> *{ margin:0; padding:0;} body{font:12px/1.5 arial;background: #fff;} .username{ position:relative;margin:30px auto; 500px;} .default{ position:absolute;top:10px;left:2px;padding:0 8px; z-index:1; color:#8B9096;cursor:text;} .txt{ position:relative; height:35px; padding:0 6px;border-radius:5px; line-height:35px;background: #fff; border:1px solid #9DADC5;} </style> </head> <body> <div class="username"> <label class="default" id="default" for="txt1">请输入关键字查询</label> <input type="text" name="" id="txt1" class="txt" value="" /> </div> <script type="text/javascript"> var oTxt = document.getElementById('txt1'); var oDefault = document.getElementById('default'); var sOld = oDefault.innerHTML; oTxt.onfocus = function(){ oDefault.style.color = '#ccc'; } oTxt.onblur = function(){ oDefault.style.color = '#8B9096'; } oTxt.onpropertychange = oTxt.oninput = toChange; oTxt.value.length > 0 && (oDefault.innerHTML = ''); function toChange(){ if(oTxt.value.length > 0){ oDefault.innerHTML = ''; } else { oDefault.innerHTML = sOld; bWrite = false; } } </script> </body> </html>

查看全文

相关阅读:
Javaweb开发环境与搭建
 剑指Offer:面试题32——从1到n整数中1出现的次数(java实现)
剑指Offer:面试题31——连续子数组的最大和(java实现)
剑指Offer:面试题30——最小的k个数(java实现)
剑指Offer:面试题29——数组中出现次数超过一半的数字(java实现)
剑指Offer:解决难题时的三大方法
 剑指Offer:面试题28——字符串的排列(java实现)（待序）
剑指Offer:面试题27——二叉搜索树与双向链表(java实现)
剑指Offer:面试题26——复制复杂的链表(java实现)
剑指Offer:面试题25——二叉树中和为某一值的路径(java实现)

原文地址：https://www.cnblogs.com/jikey/p/3044694.html

最新文章
Java day 1
登录界面
 HTML+CSS编写一个计科院网站首页静态网页
 第一次作业
 作业
 servlet概述
 Java scirpt简介
 CSS样式
 JAVA WEB开发环境与搭建
 HTML简介

热门文章
web服务器的原理
 过滤器的使用
 session 的使用
 cookie 的使用
 servlet 校验密码
 servlet 验证
 登陆界面
 servlet 概述
 Java script 简介
 HTML写静态页面