如何实现单击文本框,里面的文字隐藏,点击外面,文本框文本显示出来,下面我给大家看一下,我们做华为网页的时候文本框的截图
在input标签给它设置圆角效果,和边框为0,但是当点击文本框,它有一个蓝色的轮廓,而且竖线很浅,贴近边框
所以我们给它一个轮廓outline设置为none,竖线缩进可以设置正值或者负值,负值则向左靠近,正值则向右。
.headerright input{
width:320px;
height: 30px;
border-radius: 20px;
border: 0;
background: #f5f5f5;
outline: none;
text-indent: 14px;
}
我们用js写一下文本框文字的显示和隐藏,通过点击文本框,触发焦点事件,点击文本框,里面的文字隐藏,点出去文字显示。
var inputname=document.getElementById("inputname");
var buttonfont=document.getElementById("buttonfont");
inputname.onclick=function(){
/*console.log("文本框获得了焦点");*/ buttonfont.style.display="none";
};
inputname.onblur=function(){
/*console.log("文本框失去了焦点");*/ buttonfont.style.display="block";
};