1

我想要一些像 windows live 上的登录框一样的东西。我在其中看到标签的框，然后当用户开始输入时标签消失。

我只能找到使用 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 占位符 polyfill：

于 2013-01-09T20:24:29.450 回答
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 回答
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 回答