网页中隐藏文本框的内容

简介: 很多网页再输入框中都是这样设置的

image.png

image.png

image.png

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><style>input {
color: #999;        }
</style></head><body><inputtype="text"value="手机"><script>// 1.获取元素vartext=document.querySelector('input');
// 2.注册事件 获得焦点事件 onfocus text.onfocus=function() {
// console.log('得到了焦点');if (this.value==='手机') {
this.value='';
                }
// 获得焦点需要把文本框里面的文字颜色变黑this.style.color='#333';
            }
// 3. 注册事件 失去焦点事件 onblurtext.onblur=function() {
// console.log('失去了焦点');if (this.value==='') {
this.value='手机';
            }
// 失去焦点需要把文本框里面的文字颜色变浅色this.style.color='#999';
        }
</script></body></html>
相关文章
|
6月前
|
JavaScript 前端开发 数据安全/隐私保护
获取焦点后隐藏提示内容的输入框
获取焦点后隐藏提示内容的输入框
59 0
|
6月前
根据用户是否输入和是否文本框内容为空来决定显示按钮颜色
根据用户是否输入和是否文本框内容为空来决定显示按钮颜色
41 0
如何快速修改网页上的文字?
如何快速修改网页上的文字?
463 0
|
JavaScript
点击文字显示,点击文字隐藏(5)
点击文字显示,点击文字隐藏(5)
点击文字显示,点击文字隐藏(3)
点击文字显示,点击文字隐藏(2)
|
JavaScript 前端开发 API
几行代码搞定网页全屏自定义内容
screenfull 是用于跨浏览器使用 JavaScript Fullscreen api 的简单包装器,可让您将页面或任何元素全屏显示 。
|
JavaScript 前端开发 API
前端|获取网页中鼠标选中文字
前端|获取网页中鼠标选中文字
247 0