我已经实现了占位符,就像twitter和google一样 但我想出于某种原因改进这段代码。 当有人检查元素我想只允许输入元素
这是代码
<style type="text/css">
input.txtl{padding: 4px 4px;width: 100%;border: 0px}
div.txtlo{width: 200px;position: relative;border: 1px solid #000099;}
div.placer{position: absolute;z-index: 5;top: 0px;left: 0px;background: transparent;width: 100%;color: #cccccc;white-space: nowrap;padding: 2px;padding-left: 4px}
div.hints{background: transparent;margin: 3px}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
function perform(val,hid){
val=val.trim();
if(val==""){
$("#"+hid).show();
}else{
$("#"+hid).hide();
}
}
</script>
<div class="txtlo">
<input type="text" class="txtl" id="us" onkeyup="perform(this.value,'plcus')" />
<div class="placer" onclick="$('#us').focus()" id="plcus">Enter Password</div>
</div>
现在,当我使用firefox的默认检查器进行检查时,我得到了这个。
正如你在这张图片中看到的那样,蓝色边框显示这意味着我的占位符div大于输入.....有些方面可以使输入和占位符在宽度和高度上相同
答案 0 :(得分:0)
嘿,现在已经习惯了这个
<input type="text" onkeypress="return submitenter(this,event)" id="" name="" onfocus="this.value = ''" onblur="if(this.value == '') this.value='Enter Password'" value="Enter Password">
或者这个
<input type="text" placeholder="Enter Password">
答案 1 :(得分:0)
对于你的css问题试试这个。根据您的需求进行调整 演示: http://jsfiddle.net/elclanrs/bCqQp/
.txtlo, .placer, .txtl {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.txtlo {
position: relative;
width: 200px;
height: 30px;
line-height: 30px;
padding: 0 1em;
border: 1px solid black;
}
.placer {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 1em;
}
.txtl {
display: block;
width: 100%;
border: none;
}