在我的一个网站上,我创建了一个表单,用于收集人员姓名,电子邮件和他们想法的描述.
我将描述的字符限制为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,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>
解决方法
查看
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>