Html占位符文本以textarea形式

前端之家收集整理的这篇文章主要介绍了Html占位符文本以textarea形式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在我的一个网站上,我创建了一个表单,用于收集人员姓名,电子邮件和他们想法的描述.

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

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

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

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

这是我写的

在头部标签

  1. <script language="javascript" type="text/javascript">
  2. function limitText(limitField,limitCount,limitNum) {
  3. if (limitField.value.length > limitNum) {
  4. limitField.value = limitField.value.substring(0,limitNum);
  5. } else {
  6. limitCount.value = limitNum - limitField.value.length;
  7. }
  8. }
  9. </script>

身体内部的标签

  1. <form name="form1" method="post" action="ideas.PHP">
  2. Your Name: &nbsp;<input type="text" name="name"><br>
  3. Your Email: &nbsp;<input type="text" name="email"<br>
  4. <textarea name="desc" cols=50 rows=10 onKeyDown="limitText(this.form.desc,this.form.countdown,500);"
  5. onKeyUp="limitText(this.form.desc,500);">Description of your idea</textarea><br>
  6. <font size="1">(Maximum characters: 500)<br>
  7. You have <input readonly type="text" name="countdown" size="3" value="500"> characters left.</font>
  8. <br>
  9. <input type="submit" name="Submit" value="Submit!"> </form>

解决方法

查看 http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html我觉得它有你想要的东西.

这是一个简单的页面,上面有一个我快速放在一起的电子邮件字段(主要来自教程).

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6. // Focus auto-focus fields
  7. $('.auto-focus:first').focus();
  8.  
  9. // Initialize auto-hint fields
  10. $('INPUT.auto-hint,TEXTAREA.auto-hint').focus(function(){
  11. if($(this).val() == $(this).attr('title')){
  12. $(this).val('');
  13. $(this).removeClass('auto-hint');
  14. }
  15. });
  16.  
  17. $('INPUT.auto-hint,TEXTAREA.auto-hint').blur(function(){
  18. if($(this).val() == '' && $(this).attr('title') != ''){
  19. $(this).val($(this).attr('title'));
  20. $(this).addClass('auto-hint');
  21. }
  22. });
  23.  
  24. $('INPUT.auto-hint,TEXTAREA.auto-hint').each(function(){
  25. if($(this).attr('title') == ''){ return; }
  26. if($(this).val() == ''){ $(this).val($(this).attr('title')); }
  27. else { $(this).removeClass('auto-hint'); }
  28. });
  29. });
  30. </script>
  31. </head>
  32. <body>
  33. <form>
  34. Email: <input type="text" name="email" id="email" title="i.e. me@example.com" class="auto-hint" />
  35. </form>
  36. </body>
  37. </html>

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

猜你在找的HTML相关文章