首页 文章

以textarea形式的Html占位符文本

提问于
浏览 次
5

在我的一个网站上，我创建了一个表单，收集人员姓名，电子邮件和他们想法的描述 .

我将描述的字符限制为500个字符，因为我不想阅读，我想出了如何在用户输入他们想要的内容之前将文本显示在textarea中 .

目前用户必须自己删除“你的想法的描述”，但我想添加占位符类，当它们单击textarea时删除我在textarea中写的内容

我查了几个网站，无法弄清楚如何使用它我把它放在我的代码中，但通常这个类只是作为文本出现在我的textarea中 .

任何使用这个课程的帮助都会非常感谢你

这是我写的

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>
html forms textarea watermark placeholder

2 回答

  • 7

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

    Headers 文本如果为空则放在字段中，并在用户开始键入后删除 .

    回复于
  • 27

    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 或类似的东西，谷歌会给你更多的负载 .

    希望有所帮助 .

    回复于

相关问题