0

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 が入力よりも大きいことを意味します..入力とプレースホルダーの両方を幅と高さで同じにする方法はありますか?

4

2 に答える 2

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">

ライブデモ

于 2012-07-25T06:21:31.683 に答える
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;
}
于 2012-07-25T06:33:46.750 に答える