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>
运行代码-文字变灰版
查看全文
相关阅读:
理解vertical-align
理解css行高(line-height)
react 生命周期函数
react Diff 算法
React中的虚拟DOM
无限重启:windows更新之后,在输入密码页面无限重启进入不了系统
[转]github 上传project代码
【转】HTTP响应状态码参考簿
TweenMax—ScrambleText插件 实现类似电脑破译密码的特效
既然CPU一次只能执行一个线程,那多线程存在的意义是什么?
原文地址:https://www.cnblogs.com/jikey/p/3044694.html
最新文章
vue-cli创建项目步骤
vue中this.$router.back()与this.$router.go(-1)返回上一页的区别
vue+ts+router实现单页面打开新窗口,不显示侧边栏问题(返回上一页,保留数据)
vue+typescrit添加富文本编辑器 图标不显示问题以及not found!
普通表格-element
js面试题,代码实现,持续更新中
js 各种进制转换,转ascll码等
百度地图 自定义弹窗 InfoBox
百度地图基本事件: marker、polygon等覆盖物添加以及删除
小程序面试题 持续更新中.....
热门文章
node-koa2 微信支付-企业付款到银行卡
node-koa2 微信支付,企业付款到零钱
面试篇
js Date方法
Vue-Router面试题
浏览器缓存
浏览器从输入url到渲染页面,发生了什么?
HTTP 常用状态码
HTTP 的基本结构
DNS 解析过程
Copyright © 2011-2022 走看看