textarea标签和label标签让我郁闷的时候

原创 2015年03月24日 10:03:31

说到<label>标签,是因为浏览器兼容性的问题。在做亚马逊功能模块的时候,有一个审核的功能,用到radio,写代码的时候,不知怎么想的把每个<input>标签放在<label>之间,结果问题来了。我自己因为喜欢使用Chrome浏览器,测试时没有问题的,代码上传上去后,产品部和测试部就反应审核功能用不了,也就是radio不起作用,点不动。自己去看了一下,还真是这样,自己找了一会,最后定位在这一区域,豁然之间把<label>去掉,问题就这样ok了。这事给我一个经验教训,就是这种不是很熟悉的标签就不要用。就像之前在<td>标签中使用onmouseover和onmouseout方法,结果让人崩溃。

说到<textarea>标签,是因为昨天有人反映,Listing上传策略和Product Title显示的时候内容不居中。首先我的反映是不是数据库的数据有问题,结果发现,有的数据还真的前面有空格,难道说问题就这样找到了,还真没那么简单,有些数据前面是没有空格的,但是显示的时候却是有空格的,这就奇怪了。用了trim()和各种正则进行过滤,结果还是不行。请教了旁边专门做服务器的老手,还是没找到症结所在。今天早上,通过浏览器控制台看了一下,又对照着看看代码,不知怎么想的,把<textarea>之间的换行去掉,测试了一下,竟然可以了,靠,突然之间觉的自己真的很悲催。

特地把代码粘贴如下

<tr bgcolor="#ffffff" height="25">
				<td>Listing上传策略(挂靠变体等)</td>
				<td>
					<textarea type="text" name="product[upload_policy]" cols="150" rows="1" >
						<?php echo $rs['upload_policy']?>
					</textarea>
				</td>
			</tr>

有时不要为了代码的好看而随便的换行,浏览器在解析的时候可不考虑这些,在解析到<textarea>的首标签和尾标签,自动把标签之间的内容无论空格、换行,还是自己写的内容都当做文本域的内容了。

有些人在添加数据的时候,在首尾带了空格插入数据库,我只好在插入的时候,对字段进行trim操作,在显示的时候也进行trim操作,这样就比较完美的解决问题了。

<tr bgcolor="#ffffff" height="25">
				<td>Listing上传策略(挂靠变体等)</td>
				<td><textarea type="text" name="product[upload_policy]" rows="1"cols="150"><?php echo trim($rs['upload_policy'])?></textarea></td>
			</tr>



常见textarea换行问题的处理方法

textarea换行时主要遇到的有以下两个问题 1、在textarea中输入回车符 在js读取textarea中的值有\r\n然后到业务层转换到string中就有可能变成空格形式然后被存入数据库...
  • jkpi888
  • jkpi888
  • 2013年11月24日 10:15
  • 3569

如何在<textarea>标签中消除HTML标签!

把从后台获取到的都带有html标签的数据放到textarea中,无论使用 $("textarea").html(string), $("textarea").text(string), $("text...
  • Academia_zhen
  • Academia_zhen
  • 2017年04月26日 15:44
  • 1340

关于label标签搭配textarea使用的样式问题

默认两者搭配使用时,标签是位于textarea左边底部。解决方法 在textarea标签中添加样式vertical-align: top;即可...
  • limy_cxm
  • limy_cxm
  • 2017年06月05日 18:03
  • 151

textarea label

文本域,支持多行文本输入 当用户需要在表单中输入大段文字时,需要用到文本输入域。 语法: rows="行数" cols="列数">文本 1、标签是成对出现的,以开始,以...
  • huangmin113659
  • huangmin113659
  • 2016年04月25日 20:41
  • 201

React-表单详解

一、表单事件 React支持所有的HTML事件,这些事件遵循驼峰命名的约定,且会转成合成事件,这些事件是标准化的,提供饿了跨浏览器的一致接口。 所有合成事件提供了event.target来访问触发...
  • limm33
  • limm33
  • 2016年03月21日 10:05
  • 11917

Html标签 textarea 的属性及用法

HTML中的标签textarea的属性及用法 1、cols,垂直列。在没有做样式表设置的情况下,它表示一行中可容纳下的字节数。例如cols=60,表示一行中最多可容纳60个字节,也就是30个汉字...
  • z_yin
  • z_yin
  • 2014年05月09日 11:07
  • 1498

HTML基础之label标签

我们知道一个完整的表单是由表单标签与其中包裹的各种表单控件组成的。label标签是一种常见的表单控件。它的作用是使用户在填写表单的项目时有更好的体验。比如说如下这个例子E-mail:        ...
  • SnowShenYong
  • SnowShenYong
  • 2016年09月12日 09:27
  • 2505

HTML5表单(二)form标签 input标签 textarea标签

表单标签的名字叫做from,在网页上插入一个form标签就定义了一个表单,该标签和我们之前学习的标签不太一样,因为它是不可见的。也就是说用户是无法在网页当中看到表单的。输入标签:该系列有两个标签,主要...
  • u013225534
  • u013225534
  • 2016年08月31日 22:51
  • 4058

Label设置行间距

Label设置行间距
  • huangyongf
  • huangyongf
  • 2016年07月09日 21:07
  • 1725

如何让textarea中输入多行的数据在p标签中换行?

我们在用React开发Web项目的过程中,有的时候,我们需要把textarea中输入的多行字符串,在其他的标签中输出来,比如p标签。但是,往往这个时候,在p标签中输出的内容其默认情况下是不换行的。比如...
  • chancein007
  • chancein007
  • 2017年11月13日 23:32
  • 1825
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:textarea标签和label标签让我郁闷的时候
举报原因:
原因补充:

(最多只允许输入30个字)