不显眼的“默认”没有jQuery的输入文本 [英] unobtrusive "default" text in input WITHOUT jQuery

问题描述

我试图在输入中写入不引人注意的默认/占位符文本（实际上，相对于标签> 输入 ，它隐藏在 onFocus 上，并且保持隐藏状态，如果 onBlur ），但我不想使用jQuery，因为这是页面上唯一使用的JavaScript - 因此使用jQuery看起来有点超过了顶部。

请问，如何

谢谢。

编辑：我可以在没有 jQuery的情况下执行此操作知道这个想法（ getElementByID ），但我更关注如何将它添加到文档中 - 最好是以前使用过的东西。谢谢。编辑：谢谢大家，我终于用 jQuery去了，看到了答案：]（我的例子是这里： http://jsbin.com/ehega/3 - 这是概念，我可能会添加更多的眼睛糖果。一个答案我罗伯特Koritnik - 因为有效点...和造型;]）

解决方案

我建议你使用jQuery h2>

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

否？然后手动执行它，但使它更加可重用

但是，如果您决定手动执行某项操作，则可以随时使用常规Javascript并根据需要操作DOM。在这种情况下，你最好的朋友当然会（正如Andrew指出的那样）：


$ liElementById（） code>和

getElementsByTagName（）

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

 < input type = text id =inputXname =inputXplaceholder =Enter something> ; 
  

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

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

i'm trying to write unobtrusive default/placeholder text in input (actually, relatively placed label over input, which hides on onFocus, and stays hidden if input isn't empty on onBlur), but I don't want to use jQuery, because this is the only javascript used on page - therefore using jQuery seems a bit over the top.

Please, how can I do this without jQuery?

Thank you.

EDIT: I know the idea (getElementByID), but I'm more looking into how to add it to document - preferably something you have used before. Thank you.

EDIT: Thank you all, I finally went with jQuery, seeing answers :] (my example is here: http://jsbin.com/ehega/3 - it's concept, I'll probably add more eye candy. As an answer I Robert Koritnik - because of valid points... and styling ;])

解决方案

I suggest you use jQuery

jQuery is nothing more than a cross-browser library that makes it easier for developers to achieve something and not worry about browser particularities. And when you load it once (it's rather small) it's cached so I wouldn't worry because it will save you lots of development/testing time later.

No? Then do it manually but make it more reusable

But if you do decide to do something manually you can always use regular Javascript and manipulate DOM as you wish. You best friends in this case would of course be (as Andrew pointed out):

• getElementById() and
• getElementsByTagName()

functions, but since you'll be manipulating DOM and styles, make sure you test your code against all common browsers. If you use custom attributes on INPUT elements it's good to use the second function, so you'll attach additional functionality to all inputs at once and only to those that define that particular custom attribute like:

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

Your script would then get all inputs and you'd check for the custom attribute existance and attach events to those elements that do define that attribute. This way you won't depend on IDs and make your code universal so you can reuse it app wide. Or even on other projects.

Just a sidenote: Andrew's example works somehow differently than what you said would like to do (using labels), but I suggest you use the same approach, because you'll be running scripts anyway. For the sake of unobtrusiveness make sure that you set default content using Javascript so default values and styles on textboxes won't be set for those users that are not running Javascript.

这篇关于不显眼的“默认”没有jQuery的输入文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！