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>
最佳答案
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
其他回答(1)
0
可以给TextBox设置size属性<input id="txtName" type="text" name="orginput" size="10"/>
这样它就不会变形了
收获园豆：7
不行啊,添加后还是会变形啊.这个问题有谁遇到并解决过啊...
这样就ok啦
文本框和css中设置宽度要一样
这里文本框要能自动伸缩,如果固定长度就不会出现这种情况咯!!
