携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

最近在工作中产品提了一个需求，用户可以在文本域中输入内容且给出提示，但是我看了一文本域标签并没有提示语的属性，本着说服不了产品就说服自己的原则，自己左思右想，通过定位的方式进行实现文本域的提示语

页面结构

   <div id="app">
        <textarea id="text" cols="30" rows="10"></textarea>
        <div id="tips"></div>
    </div>

页面样式

    * {
            margin: 0;
            padding: 0;
        }
        
        #app {
            width: 400px;
            height: 400px;
            position: relative;
            margin: 100px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #app textarea {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 20px;
            background: #c2d16d;
            border-radius: 20px;
            font-size: 20px;
        }
        
        #tips {
            position: absolute;
            top: 20px;
            left: 20px;
            color: #333;
            font-size: 20px;
        }

通过上述操作，我们通过css进行定位，将提示语句定位到和文本域开始头一行的位置相同，接下来我们来实现一下

获取到模仿提示语的盒子且用tips变量存储起来，文本域也获取到，通过textarea的变量进行存储起来

  const tips = document.getElementById("tips");
  const textarea = document.getElementById("text");

通过tips变量往提示语盒子插入提示的文字

const tipsText = "请输入内容";
  tips.innerText = tipsText;

既然是提示语那就需要文本域用户准备输入内容的时候，提示语消失，当用户输入完毕的时候，提示语展示，在此期间还需要判断一下用户是否输入内容，如果有内容则提示语不展示，否则提示语则展示

根据以上需求，我们给文本域的绑定焦点失去事件，当文本域焦点失去的时候，通过文本域的value的方法进行获取到文本域中的输入值，在使用if语句进行判断当前文本域的输入值是否为空，为空则展示提示语，不为空则不展示，在给文本域绑定一个获取焦点事件，如果文本域获取焦点则提示语隐藏

   textarea.addEventListener('blur', () => {
            let val = textarea.value;
            if (!val) {
                tips.style.display = "block";
            }
        }, false);

        textarea.addEventListener('focus', () => {
            tips.style.display = "none";
        }, false);

这里还有一个小bug，提示语通过定位的方式定位到了文本域内部，提示语是我们手动添加的，所以用户点击提示语的时候，文本域并不会获取焦点，这个时候我们可以采用通过点击提示语，手动添加文本域获取焦点方法,完美解决

  tips.addEventListener('click', () => {
            textarea.focus()
            }，false)

坚持努力，无惧未来！

原生JS实现文本域提示语

页面结构

页面样式