如何在未选择文本区域时显示占位符

How can I make my placeholder show when the textarea is not selected?

本文关键字：区域 显示 占位符 文本 选择      更新时间：2023-09-26

现在，当我单击文本区域输入文本时，我有一个占位符出现在文本区域的背景中。

但是，我希望即使我不在文本区域内单击，占位符也能显示。我只想在加载文本区域时显示文本？

这是我占位符的主要代码： 

if (selectItem != null) {
            var notesContent = selectItem.description;
            var textarea;
            var browser = BrowserSide.BrowserCompatibility.GetBrowser();
            if (browser == "Explorer") {
                textarea = '<div class="light-list-box" style="padding:10px;width: 100%; height: 100%; border:none "><textarea id="notes-content" class="image-textarea" style="resize: none; width:85%; height:195px; overflow:auto" cols="5" rows="10" name="Note">{0}</textarea></div>';
            } else {
                var placeHolder = BrowserSide.GlobalObjects.getString("TextareaPlaceHolder");
                textarea = '<div class="light-list-box" style="padding:10px;width: 100%; height: 100%; "><textarea placeholder="' + placeHolder + '" id="notes-content" class="image-textarea" style="resize: none; width:85%; height:195px; overflow:auto" cols="5" rows="10" name="Note">{0}</textarea></div>';
            }
            if (notesContent != null && notesContent != '') {
                $('#notes-content').css('padding', '6px');
                textarea = BrowserSide.GlobalObjects.stringFormat(textarea, notesContent);
            }
            else { 
                 textarea = BrowserSide.GlobalObjects.stringFormat(textarea, '');
            }
            updateSelector();
            notes.html('');
            notes.append(textarea);
            notes.show();
        }
    };

如何在文本区域中未选择/单击时显示占位符？

一个jquery解决方案：您可以使用.focus()和.blur()事件来处理文本区域的内容：
因此，当您集中注意力时，您无需显示任何内容：

$('textarea').focus(function () {$(this).empty()});

当你不专注于它时：

$('textarea').blur(function () {$(this).html('your placeholder...').css('color','gray');});

您还可以检查用户是否输入了任何内容：

$('textarea').blur(function () {
     if ($(this).text().length == 0) 
         $(this).html('your placeholder...').css('color','gray');
});

注意：请记住在加载文档时设置占位符。 最好编写一个全局使用的函数：http://jsfiddle.net/vesc1zLy/6/

简单的解决方案：JSBin 的演示

    <textarea type="text" placeholder="enter your text" 
              onfocus="this.placeholder = ''" 
              onblur="this.placeholder = 'enter your text'">
    </textarea>

您可以使用定位:after伪元素：

.light-list-box {
    position:relative;
}
.light-list-box:after {
     position:absolute;
     top:0;
     left:0;
     content: 'your placeholder text'
}
相关文章：