[英]Html placeholder text in a textarea form
在我的一個網站上,我創建了一個表單,收集人員姓名,電子郵件和他們想法的描述。
我將描述的字符限制為500個字符,因為我不想閱讀,我想出了如何在用戶輸入他們想要的內容之前將文本顯示在textarea中。
目前用戶必須自己刪除“你的想法的描述”,但我想添加占位符類,當它們單擊textarea時刪除我在textarea中寫的內容
我查了幾個網站,無法弄清楚如何使用它我把它放在我的代碼中,但通常這個類只是作為文本出現在我的textarea中。
任何使用這個課程的幫助都會非常感謝你
這是我寫的
在頭部標簽內
<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
} else {
limitCount.value = limitNum - limitField.value.length;
}
}
</script>
在身體標簽內
<form name="form1" method="post" action="ideas.php">
Your Name: <input type="text" name="name"><br>
Your Email: <input type="text" name="email"<br>
<textarea name="desc" cols=50 rows=10 onKeyDown="limitText(this.form.desc,this.form.countdown,500);"
onKeyUp="limitText(this.form.desc,this.form.countdown,500);">Description of your idea</textarea><br>
<font size="1">(Maximum characters: 500)<br>
You have <input readonly type="text" name="countdown" size="3" value="500"> characters left.</font>
<br>
<input type="submit" name="Submit" value="Submit!"> </form>
HTML5中有一個名為“占位符”的功能,它可以完全生成此功能,而無需進行任何編碼。
您需要做的就是在表單字段中添加placeholder
屬性,如下所示:
<input type='text' name='name' placeholder='Enter your name'>
可悲的是,當然,目前只有少數瀏覽器支持它,但是在Safari或Chrome中試一試,看看它是否正常運行。 好消息是它在不久的將來幾乎被添加到所有瀏覽器中。
當然,您仍然需要為使用舊瀏覽器的用戶提供服務,但您也可以在可以使用它的瀏覽器中使用該功能。
處理它的一個好方法是使用placeholder
屬性,如果瀏覽器不支持該功能,則只回退到Javascript解決方案。 Javascript解決方案可以從placeholder
屬性中獲取文本,因此您只需要在一個位置指定它。
有關如何檢測是否支持placeholder
功能的信息,請參閱此頁面: http : //diveintohtml5.ep.io/detect.html
(或者,正如它在該頁面上所說,只使用Modernizr )
Javascript后備代碼實現起來相當簡單。 具體如何操作將取決於您是否要使用JQuery,但這里是幾個示例的鏈接:
當然,如果您搜索html5 placeholder fallback
或類似內容,Google會為您提供更多負載。
希望有所幫助。
查看http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html我認為它有你想要的東西。
這是一個簡單的頁面,上面有一個我快速放在一起的電子郵件字段(主要來自教程)。
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Focus auto-focus fields
$('.auto-focus:first').focus();
// Initialize auto-hint fields
$('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function(){
if($(this).val() == $(this).attr('title')){
$(this).val('');
$(this).removeClass('auto-hint');
}
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function(){
if($(this).val() == '' && $(this).attr('title') != ''){
$(this).val($(this).attr('title'));
$(this).addClass('auto-hint');
}
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').each(function(){
if($(this).attr('title') == ''){ return; }
if($(this).val() == ''){ $(this).val($(this).attr('title')); }
else { $(this).removeClass('auto-hint'); }
});
});
</script>
</head>
<body>
<form>
Email: <input type="text" name="email" id="email" title="i.e. me@example.com" class="auto-hint" />
</form>
</body>
</html>
標題文本如果為空則放在字段中,並在用戶開始鍵入后刪除。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.