JavaScript 仿京东搜索框-显示隐藏文本框

梦溪分享

介绍

仿京东搜索框功能

默认文字灰色显示

点击文本框默认文字清除

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

代码：

样式：

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';
            }

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

JavaScript