2

我写了一些代码，有点像使用 JavaScript 替代 HTML5 占位符，但它不起作用。据我所知（以我对 js 的平庸知识），一切都应该工作，但事实并非如此。请帮忙！！！这是我的代码：

JavaScript：

(function(){
    var field = document.getElementById('placeholder');
    var placeholdertext = "Search box"; // << change this to whatever you want the placeholder text to be

    field.setAttribute("onblur", "if(value=='') { value = '" + placeholdertext + "'")
    field.setAttribute("onfocus", "if(value=='" + placeholdertext + "') { value = '' }")
})();

HTML

<input type="search" value="Search box" id="placeholder">

编辑：

我不想使用 jQuery 或 inline-html-coding，拜托。感谢您的帮助，伙计们！！！

4

4 回答 4

2

在您的代码中替换value为this.value（因为您需要检查触发事件的元素的值，而不是某个全局变量），它将起作用。

作为旁注，也许我更喜欢placeholder在这里仍然使用属性，只为不支持它的浏览器提供一个 JS 垫片。这也将简化 javascript 代码部分，因为您不必使用一些变量来存储一些与 DOM 相关的数据：

field.onblur = function() {
  if (this.value === '') {
    this.value = this.getAttribute('placeholder');
  }
};

field.onfocus = function() {
  if (this.value === this.getAttribute('placeholder') ) {
    this.value = '';
  }
};

...事实上，我更喜欢使用addEventListener/attachEventhere 而不是onblur/onfocus，如本答案中所述。

于 2012-11-05T01:03:27.823 回答
2 
<input type="text" value="Enter The User Name" onblur="if(this.value == '') { this.style.color='#f00'; this.value='Enter The User Name'}" onfocus="if (this.value == 'Enter The User Name') {this.style.color='#000'; this.value=''}" />

在没有 Jquery 的情况下试试这个

于 2014-09-12T12:43:43.357 回答
1

没有 jQuery：

field.onblur = function() {
  if (field.value == '') {
    field.value = placeholdertext;
  }
};

field.onfocus= function() {
  if (field.value == placeholdertext ) {
    field.value = '';
  }
};
于 2012-11-05T01:03:45.973 回答
0

我没有对此进行测试，但如果我理解你的问题，这应该可以。如果它有效，请不要忘记点击复选标记。

    var field = document.getElementById('placeholder');
    var placeholdertext = "Search box";

    field.bind('onblur', function() {
        if (field.text() === '') {
            field.text(placeholdertext);
        }
    });

    field.bind('onfocus', function() {
        if (field.text() === '') {
            field.text(placeholdertext);
        }
    });
于 2012-11-05T01:00:32.237 回答