html5的placeholder这个属性在获得焦点时怎样让默认的字体消失呢？

Posted 2023-04-03

不用js的情况下在获得焦点时能让默认文字消失吗？

不能。

这个属性在不同浏览器下的显示是不一样的。

在 Firefox、Chrome、Microsoft Edge 或其他使用以上三种内核的浏览器中，输入框获得焦点时，placeholder 没有变化，只有当输入框中输入了内容时，placeholder 才消失（这也是主流做法）；而在 Safari 和 IE9+ 或其他使用以上两种内核的浏览器中，当输入框获得焦点时，placeholder 便会消失。 参考技术A 可以哦，本来就不用js就可以消失的追问

这个是在输入时才消失啊 获取焦点时不能消失 看截图

追答

哦，你知道了就可以了

参考技术B

placeholder 这是html5的属性方法，改不了的。

你可以用 js 方法实现这样的效果如：
<input type="text" value="请输入" onfocus="javascript:if(this.value=='请输入')this.value='';">

希望对你有帮助

本回答被提问者采纳 参考技术C html5的placeholder这个属性就是获取焦点文字消失的啊追问

这个是在输入时才消失啊 获取焦点时不能消失 看截图

小程序---- input获得焦点时placeholder重影BUG

1. 问题
   小程序的input组件有个自身的bug，即当输入框获取焦点时placeholder内容会出现重影现象。
   
   
2. 解决思路
   原理：将placeholder内容单独写在另外的标签里，控制其显示隐藏。
   操作：将代表placeholder内容的标签定位到input框上，在input输入事件中控制标签隐藏，在input失焦事件中若输入框内容为空时控制标签显示。
3. 代码实现
   

   // wxml文件
     <view>
        <input placeholder=\'\' value="{{username}}" bindinput="handleName" bindblur="blurAccount"></input>
        <text class="placeholder" wx:if="{{placeAccount}}">账号</text>
     </view>
   
   // js文件  
     data: {placeAccount: true},
     handleName() {   // input输入事件
       this.setData({
         placeAccount: false
       })
     },
     blurAccount() {  // input失焦事件   
       if (!this.data.username) {
         this.setData({
           placeAccount: true
         })
       }
     }