如何在textarea未選中時顯示佔位符？

現在，我有一個佔位符出現在我的textarea的背景中，當我點擊textarea輸入文本。如何在textarea未選中時顯示佔位符？

但是，即使我沒有在textarea中單擊，我也希望顯示佔位符。我只想要文本在textarea加載時出現？

這裏是我的主代碼中的佔位符：

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(); 
     } 
    };

我怎樣才能讓我的佔位符秀時，未選擇的textarea /點擊裏面？

來源

2014-12-01 Kala J

http://jsfiddle.net/uwxvgsvs/ – Cristy 2014-12-01 19:53:28

@Cristy請看看我的代碼。我做到了這一點，它不工作。 – 2014-12-01 20:10:46

一個jQuery解決方案：可以使用.focus()和.blur()事件來處理你的textarea的內容：
因此，當你專注，你不「T需要顯示任何東西：

$('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/

來源

2014-12-01 20:15:46 01e

你可以使用一個定位:after僞元素：

.light-list-box { 
    position:relative; 
} 

.light-list-box:after { 
    position:absolute; 
    top:0; 
    left:0; 
    content: 'your placeholder text' 
}

來源

2014-12-01 20:01:00

我不能這樣做。我將這個CSS重複使用到另一個textarea，我不想讓這個內容顯示 – 2014-12-01 20:10:26

然後子類CSS'.light-list-box.placeholder' – 2014-12-01 20:46:23

簡化算法：DEMO at JSBin

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

來源

2014-12-01 22:17:53

如何在textarea未選中時顯示佔位符？

回答

相關問題