梦溪分享

介绍

仿京东搜索框功能

默认文字灰色显示

点击文本框默认文字清除

离开文本框,若文本框为空则显示默认文字,若有其他文字则灰色显示

代码:

样式:

input {
                color: #999;
            }

输入框:

<input type= 'text' value="手机"></input>

Script代码:

    var text = document.querySelector('input');
            text.onfocus = function() {
                if(this.value === '手机') {
                    this.value = '';
                }
                this.style.color = 'black';
            }
            text.onblur = function() {
                if(this.value === '') {
                    this.value = '手机';
                }
                this.style.color = '#999';
            }
最后修改:2021 年 09 月 13 日
如果觉得我的文章对你有用,请随意赞赏