网页中隐藏文本框的内容

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

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>
相关文章
|
7月前
|
JavaScript 前端开发 数据安全/隐私保护
获取焦点后隐藏提示内容的输入框
获取焦点后隐藏提示内容的输入框
63 0
|
1月前
|
前端开发
通过onhashchange事件,点击a标签,文本框出现对应内容
通过onhashchange事件,点击a标签,文本框出现对应内容
如何快速修改网页上的文字?
如何快速修改网页上的文字?
489 0
|
7月前
点击富文本部分文字跳转功能
点击富文本部分文字跳转功能
104 0
|
7月前
根据用户是否输入和是否文本框内容为空来决定显示按钮颜色
根据用户是否输入和是否文本框内容为空来决定显示按钮颜色
52 0
|
JavaScript
点击文字显示,点击文字隐藏(5)
点击文字显示,点击文字隐藏(5)