runxinzhi.com
首页
百度搜索
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>
运行代码-文字变灰版
相关阅读:
git-guide
jenkinsfile 庖丁解牛
pipline预发的'拉取代码'的stage
jenkinsfile的credentialsId
jenkins配置ssh插件
Rancher
福至心灵篇-python
生成器和迭代器思维导图(待补充)
怎么样才能使内心平静?
Java中的语法糖
原文地址:https://www.cnblogs.com/jikey/p/3044694.html
最新文章
POJ 2676 Sudoku
NOIP 2015 斗地主
NOI 1999 生日蛋糕
NOIP 2004 虫食算
NOIP 2016 天天爱跑步
洛谷 P1220 关路灯
小技巧—DP的填表法和刷表法
USACO The Cow Run
USACO Generic Cow Protests Gold
JAVA 用时间生成主键ID
热门文章
bat文件备份数据库
js操作session
Dockerfile制作应用镜像
python使用指定仓库安装python需要的包
postgres timesaledb MySQL数据库容器化部署
Python subprocess
presto-admin2.5 安装部署prestoserver0.224
Resources For Developers
Python request
presto-admin 安装及管理presto集群
Copyright © 2020-2023
润新知