首页 新闻 会员 周边 捐助

input text 增加边框导致变形

1
悬赏园豆:20 [已解决问题] 解决于 2011-08-23 14:45

页面添加了一个Table,代码如下;

<body>
<input id="btnCreate" type="button" class="btnClass" value="新建" onclick="changeSize()" />
<table style="width:500px">
<tr>
<td width="30%"><input id="txtName" type="text" name="orginput" style="width: 100%" /></td>
<td width="30%"><input id="txtName2" type="text" name="orginput" style="width: 100%" /></td>
<td width="40%"><input id="txtName3" type="text" name="orginput" style="width: 100%" /></td>
</tr>
</table>
</body>

通按钮触发事件给txtName文本框的添加样式

.validationError
{
border
:1px solid red;
}

如果文本框中的文字超出了文本框的长度,增加样式后文本框变的好处,把所有字符都显示出来了

改变前:

改变后:

问题补充:

按钮的时间js代码

<script type="text/javascript" language="javascript">
function changeSize(){
alert(
"123");
$(
"#txtName").css("border","1px solid red")
}
</script>
Seven_boy的主页 Seven_boy | 初学一级 | 园豆:50
提问于:2011-08-11 16:25
< >
分享
最佳答案
0

解决方案有两个

1:检查html文件的docType

经测试在

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

下执行上面的测试确定会出现变形的 问题,

但是docType如果是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

则不会出现变形的现像,具体的原因是不用标准解析不一样!所以使用第二种方式可以解决以上问题! 这是解决办法1

2:为了防止txtName上面为变形,可以预先给txtName加上一个与背景一样的边框,如

border: solid 1px blue;

再进行相关的加边框操作则不会出现上面问题,

没有仔细测试,可能会存在更好的办法!

收获园豆:13
Wid纬度 | 初学一级 |园豆:60 | 2011-08-12 16:13
其他回答(1)
0

可以给TextBox设置size属性<input id="txtName" type="text"  name="orginput" size="10"/>

这样它就不会变形了

收获园豆:7
julia2011 | 园豆:222 (菜鸟二级) | 2011-08-11 21:07
不行啊,添加后还是会变形啊.这个问题有谁遇到并解决过啊...
支持(0) 反对(0) Seven_boy | 园豆:50 (初学一级) | 2011-08-12 09:11





这样就ok啦
支持(0) 反对(0) julia2011 | 园豆:222 (菜鸟二级) | 2011-08-12 10:15
文本框和css中设置宽度要一样
支持(0) 反对(0) julia2011 | 园豆:222 (菜鸟二级) | 2011-08-12 10:16
这里文本框要能自动伸缩,如果固定长度就不会出现这种情况咯!!
支持(0) 反对(0) Seven_boy | 园豆:50 (初学一级) | 2011-08-16 10:31
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册