0

我正在尝试在输入中编写不显眼的默认/占位符文本（实际上，相对放置label在 上input，它隐藏在 上onFocus，如果输入不是空的，则保持隐藏onBlur状态），但我不想使用 jQuery，因为这是页面上只使用了 javascript - 因此使用 jQuery 似乎有点过头了。

请问，没有jQuery我怎么能做到这一点？

谢谢你。

编辑：我知道这个想法（getElementByID），但我更多的是研究如何将它添加到文档中——最好是你以前使用过的东西。谢谢你。

编辑：谢谢大家，我终于选择了jQuery，看到了答案：]（我的例子在这里：http: //jsbin.com/ehega/3 - 这是一个概念，我可能会添加更多的眼睛糖果。作为答案，我Robert Koritnik - 因为有效点......和样式;]）

4

7 回答 7

3

您将需要手动附加onfocus和onblur事件，并使用getElementById.

这是一个例子：http ://www.aspsnippets.com/Articles/Watermark-TextBox-using-JavaScript.aspx

于 2010-05-18T11:05:51.130 回答
2

我建议你使用 jQuery

jQuery 只不过是一个跨浏览器库，它使开发人员更容易实现某些目标，而不必担心浏览器的特殊性。当您加载一次（它相当小）时，它会被缓存，所以我不会担心，因为它会为您节省大量的开发/测试时间。

不？然后手动进行，但使其更可重用

但是如果你决定手动做一些事情，你总是可以使用常规的 Javascript 并随心所欲地操作 DOM。在这种情况下，你最好的朋友当然是（正如安德鲁指出的那样）：

  • getElementById()和
  • getElementsByTagName()

函数，但由于您将操作 DOM 和样式，因此请确保针对所有常见浏览器测试您的代码。如果您在INPUT元素上使用自定义属性，最好使用第二个函数，因此您将立即将附加功能附加到所有输入，并且仅附加到定义该特定自定义属性的那些输入，例如：

<input type=text id="inputX" name="inputX" placeholder="Enter something">

然后，您的脚本将获取所有输入，您将检查自定义属性是否存在并将事件附加到那些定义该属性的元素。这样您就不会依赖 ID 并使您的代码具有通用性，因此您可以在应用程序范围内重用它。甚至在其他项目上。

只是一个旁注：安德鲁的例子与你所说的（使用标签）有所不同，但我建议你使用相同的方法，因为无论如何你都会运行脚本。为了不引人注意，请确保您使用 Javascript 设置默认内容，以便不会为那些未运行 Javascript 的用户设置文本框上的默认值和样式。

于 2010-05-18T11:13:41.807 回答
2

您可以使用 jQuery 并且仍然不显眼并使用 HTML5 浏览器的功能，输入如下：

<input type="whatever" placeholder="Your Default Text"/>

我使用Modernizr来检查浏览器的 html5 功能，如果浏览器不理解该placeholder属性，那么我使用这个小 javascript 来模拟这个功能。

if (!Modernizr.input.placeholder) {
  $('input').each(function(){
    var obj = $(this);
    var placeholder = obj.attr('placeholder');
    if (placeholder) {
      obj.val(placeholder);
      obj.focus(function(){
        var obj2 = $(this);
        if (obj2.val() == obj2.attr('placeholder')) obj2.val('');
      });
      obj.blur(function(){
        var obj2 = $(this);
        if (obj2.val() == '') obj2.val(obj2.attr('placeholder'));
      });
    }
  });
}

它不显眼，因为您的 html 代码中不需要任何 javascript。如果您想使用任何其他框架，可以轻松更改上述功能。我不会使用没有任何框架的解决方案，因为框架在解决浏览器之间的不兼容性方面做得很好。

于 2010-05-18T11:35:21.027 回答
2

如果没有JQuery ，我就是这样做的。它在显示默认文本时使控件变灰，并在需要时允许输入默认文本。“标题”标签将回退为禁用 JavaScript 的人的工具提示：

<html>
<body>
<input type="text" value="" title="default text"  />

<script type="text/javascript">
function DefaultInput(e) {
    // Get the elements
    this.e = e
    this.d = e.title
    this.s = e.style
    e.removeAttribute('title') // remove the tooltip
    e.value = '' // IE cached value remove HACK!

    // Bind the events
    e.onblur = this.bind(this.onblur)
    e.onfocus = this.bind(this.onfocus)

    // Show the initial value in gray
    this.onblur()
}

DefaultInput.prototype = {
    bind: function(f) {
        // Return `f` so it's always called as an object of DefaultInput
        var o = this
        return function(){
            f.apply(o, arguments)
        }
    },

    onblur: function() {
        // Gray out my value and show the default text if my value's blank
        if (!this.h && !this.e.value) {
            this.s.color = 'gray'
            this.e.value = this.d
            this.h = true // true -> help text displayed
                          // false -> help text hidden/user entered value
        }
    },

    onfocus: function() {
        // Make the text black and blank the text if in "help" mode
        if (this.h) {
            this.s.color = 'black'
            this.e.value = ''
            this.h = false
        }
    }   
}

// Make sure the page is loaded before 
// running for twitchy browsers like IE
window.onload = function() {
    // Add defaults for all text input elements which have a `title`
    var L = document.getElementsByTagName('input')
    for (var i=0; i<L.length; i++) {
        var e = L[i]
        if (e.type=='text' && 'title' in e)
            new DefaultInput(e)
    }
}
</script>
</body>

编辑：稍微清理了评论，修复了一些 IE 错误并使其查找<input>带有 's 的标签，title以使不同的页面具有更少的转换时间，而不是单独初始化输入控件；-)

于 2010-05-18T11:40:30.590 回答
1

我认为你需要这样的东西：

<input type="text" onfocus="if (this.value == this.getAttribute('mydefaulttext')) this.value = '';" onblur="if (this.value == '') this.value = this.getAttribute('mydefaulttext');" mydefaulttext="click here..." value="click here..."/>

于 2010-05-18T11:19:57.613 回答
1 
<input name="test" type="text" id="test" value="testValue" />

<script type="text/javascript">
 var myInput = document.getElementById("test");
 myInput.onfocus = function() {
   this.value = '';
 }
  myInput.onblur = function() {
   if(this.value == '') this.value = "testValue";
}
</script>
于 2010-05-18T11:22:06.537 回答
1

这是我的做法：

在线工作示例

http://jsbin.com/ehivo3（源代码）

HTML

<input type="text" name="myfield" id="myfield" value="Please, fill my field!!!" />

jQuery

$(document).ready(function() {
  // Handle each input on focus() and blug()
  $('input[type="text"]').each(function() {
    $(this)
      // Store the default value internally
      // Don't use .val() because browser autofill will poison it
      .data('defaultValue', $(this).attr('value'))
      // Handle the focus() (when you enter the field)
      .focus(function() {
        if ($(this).val() == $(this).data('defaultValue'))
          $(this).val('');
      })
      // Handle the blur() (when you leave the field)
      .blur(function() {
        if ($(this).val() == '')
          $(this).val($(this).data('defaultValue'));
      });
  });

  // Clear all fields with "default value" on submit
  $('form').submit(function() {
    $('input[type="text"]', $(this)).each(function() {
      // If the input still with default value, clean it before the submit
      if ($(this).val() == $(this).data('defaultValue'))
        $(this).val('');
    });
  });
});

就这样！没有无效或额外的属性、有效的标记，所有这些都在您的 jQuery 文件中处理。:)

于 2010-05-18T11:48:49.823 回答