以textarea形式的Html占位符文本

Question

On one of my websites I have created a form that collects the persons name, email and a description of their idea. 在我的一个网站上，我创建了一个表单，收集人员姓名，电子邮件和他们想法的描述。

I limited the characters of the description to 500 characters as I don't want to read a ton and I figured out how to have the text appear in the textarea before the user inputs what they want. 我将描述的字符限制为500个字符，因为我不想阅读，我想出了如何在用户输入他们想要的内容之前将文本显示在textarea中。

Currently the user has to delete "Description of your idea" themselves but I want to add the placeholder class where it deletes what I have written in the textarea when they click the textarea 目前用户必须自己删除“你的想法的描述”，但我想添加占位符类，当它们单击textarea时删除我在textarea中写的内容

I have looked on a few sites and couldn't figure out how to use it I placed it in my code, but usually the class just appeared as text inside my textarea. 我查了几个网站，无法弄清楚如何使用它我把它放在我的代码中，但通常这个类只是作为文本出现在我的textarea中。

Any help on using this class would be great thank you 任何使用这个课程的帮助都会非常感谢你

Here is what I have written 这是我写的

Inside the head tags 在头部标签内

<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>

Inside the body tags 在身体标签内

<form name="form1" method="post" action="ideas.php"> 
Your Name: &nbsp;<input type="text" name="name"><br>
Your Email: &nbsp;<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>

Answer 1

There is a feature in HTML5 called 'placeholders', which produces exactly this feature without you having to do any coding at all. HTML5中有一个名为“占位符”的功能，它可以完全生成此功能，而无需进行任何编码。

All you need to do is add a placeholder attribute to your form field, like so: 您需要做的就是在表单字段中添加placeholder属性，如下所示：

<input type='text' name='name' placeholder='Enter your name'>

Sadly, of course, only a few browsers currently support it, but give it a go in Safari or Chrome to see it in action. 可悲的是，当然，目前只有少数浏览器支持它，但是在Safari或Chrome中试一试，看看它是否正常运行。 The good news is that it is being added to virtually all browsers in the near future. 好消息是它在不久的将来几乎被添加到所有浏览器中。

Of course, you still need to cater for users with older browsers, but you may as well make use of the feature in browsers that can use it. 当然，您仍然需要为使用旧浏览器的用户提供服务，但您也可以在可以使用它的浏览器中使用该功能。

A good way to deal with it is to use the placeholder attribute, and only fall back to the Javascript solution if the browser doesn't support the feature. 处理它的一个好方法是使用placeholder属性，如果浏览器不支持该功能，则只回退到Javascript解决方案。 The Javascript solution can take the text from the placeholder attribute, so you only need to specify it in one place. Javascript解决方案可以从placeholder属性中获取文本，因此您只需要在一个位置指定它。

See this page for how to detect whether the placeholder feature is supported: http://diveintohtml5.ep.io/detect.html 有关如何检测是否支持placeholder功能的信息，请参阅此页面： http ： //diveintohtml5.ep.io/detect.html

(or, as it says on that page, just use Modernizr ) （或者，正如它在该页面上所说，只使用Modernizr ）

The Javascript fall-back code is fairly simple to implement. Javascript后备代码实现起来相当简单。 Exactly how you do it would depend on whether you want to use JQuery or not, but here are links to a few examples: 具体如何操作将取决于您是否要使用JQuery，但这里是几个示例的链接：

And of course Google will give you loads more if you search for html5 placeholder fallback or something similar. 当然，如果您搜索html5 placeholder fallback或类似内容，Google会为您提供更多负载。

Hope that helps. 希望有所帮助。

Answer 2

Check out http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html I think it has what you are looking for. 查看http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html我认为它有你想要的东西。

Here is a simple page that has an email field on it that I quickly put together (pulled mostly from the tutorial). 这是一个简单的页面，上面有一个我快速放在一起的电子邮件字段（主要来自教程）。

<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>

The title text is put in the field if it's empty, and removed once the user starts typing. 标题文本如果为空则放在字段中，并在用户开始键入后删除。

以textarea形式的Html占位符文本

问题描述

2 个解决方案

解决方案1
27 2011-02-16 21:30:54

解决方案2
7 已采纳 2011-02-16 20:58:55

以textarea形式的Html占位符文本

问题描述

2 个解决方案

解决方案1 27 2011-02-16 21:30:54

解决方案2 7 已采纳 2011-02-16 20:58:55

解决方案1
27 2011-02-16 21:30:54

解决方案2
7 已采纳 2011-02-16 20:58:55