不显眼的&"default&"输入文字，无需jQuery [英] unobtrusive "default" text in input WITHOUT jQuery

问题描述

我正在尝试在输入中写一些不引人注意的默认/占位符文本(实际上是将 label 相对放置在 input 上，后者隐藏在 onFocus 上)，如果输入在 onBlur 上不为空，则保持隐藏状态)，但是我不想使用jQuery，因为这是页面上唯一使用的javascript-因此，请使用jQuery似乎有点过分了.

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.

请，我该如何不用 jQuery?

Please, how can I do this without jQuery?

谢谢.

我知道这个主意( getElementByID )，但是我正在研究如何将其添加到文档中-最好是您以前使用过的东西.谢谢.

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.

谢谢大家，我终于使用 jQuery，看到了答案:](我的示例在这里: http://jsbin.com/ehega/3 -这是概念，我可能会添加更多的糖果.作为回答，Robert Koritnik-因为有效的观点和风格;])

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 ;])

推荐答案

我建议您使用jQuery

jQuery只不过是一个跨浏览器的库，它使开发人员更容易实现某些目标，而不必担心浏览器的特殊性.而且，一旦加载一次(它很小)，它就会被缓存，因此我不用担心，因为它将在以后节省大量开发/测试时间.

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.

但是，如果您决定手动执行某项操作，则可以随时使用常规Javascript并按需要操作DOM.在这种情况下，您最好的朋友当然是(正如安德鲁指出的那样):

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()和
• getElementsByTagName()

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

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">

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

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.

只是一个附注:Andrew的示例的工作方式与您说的(使用标签)不同，但是我建议您使用相同的方法，因为无论如何您都将运行脚本.为了不引人注目，请确保您使用Java脚本设置默认内容，这样不会为未运行Javascript的用户设置文本框的默认值和样式.

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.

这篇关于不显眼的&"default&"输入文字，无需jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！