1

Windowsのログインボックスのように機能するものが欲しいのですが。内部にラベルが表示されていて、ユーザーが入力を開始するとラベルが消えるボックス。

私が見つけることができるのは、jQueryを使用するソリューションだけです。jQueryをロードする必要のないjavascript/CSSソリューションを知っている人はいますか？HTML5のプレースホルダー属性以外のものを意味します。新しいものだけでなく、ほとんどのブラウザで機能するものが欲しいです。

4

4 に答える 4

2

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills これらのプラグインのほとんどでは、jquery部分を削除して、スタンドアロンとして使用できます。

于 2013-01-09T19:55:30.267 に答える
1

他のライブラリに依存しない HTML5 プレースホルダー ポリフィル:

于 2013-01-09T20:24:29.450 に答える
0

これは私が過去に使用したものです：

activatePlaceHolder: function() {
    var detect = navigator.userAgent.toLowerCase(); 
    if (detect.indexOf("msie") < 0) return false;
    var inputs = document.getElementsByTagName("input");
    var inputLen = inputs.length;
    for (var i = 0; i < inputLen; i++) {
        if (inputs[i].getAttribute("type") == "text") {
            if (inputs[i].getAttribute("placeholder") && inputs[i].getAttribute("placeholder").length > 0) {
                inputs[i].value = inputs[i].getAttribute("placeholder");
                inputs[i].onclick = function() {
                    if (this.value == this.getAttribute("placeholder")) {
                        this.value = "";
                    }
                    return false;
                }
                inputs[i].onblur = function() {
                    if (this.value.length < 1) {
                        this.value = this.getAttribute("placeholder");
                    }
                }
            }
        }
    }       
}
于 2013-01-09T20:51:32.287 に答える
0

あなたは自分自身をロールバックすることができます...これは私が一緒に通過したJSFiddleです。http://jsfiddle.net/VF8Dr/

CSS

.placeholder { 
  color: gray; 
  position: absolute;
  padding-left: 10px;
}

JS

function addPlaceholder(id, text) {
  var elm = document.getElementById(id);
  var ph = document.createElement("SPAN");
  ph.className = "placeholder";
  ph.innerHTML = text;
  elm.parentNode.insertBefore(ph, elm.nextSibling);
  ph.style.left = elm.offsetLeft + 'px';
  ph.style.top = elm.offsetTop + 'px';
  ph.onclick = function() {
    ph.style.display = 'none';
    elm.focus();
  };
  elm.onfocus = function() {
    if(ph.style.display != 'none')
      ph.style.display = 'none';
  };
  elm.onblur = function() {
    if(elm.value == '')
      ph.style.display = '';
  };
}
addPlaceholder("demo", "my text");

明らかに、広範囲にテストされているわけではありませんが、jQuery のようなフレームワークを使用しないことに固執している (または不要な肥大化を回避している) が、それでもクロスブラウザーと古いブラウザーの互換性が必要な場合は、そこに到達するのに役立ちます.

于 2013-01-09T20:41:41.797 に答える