转换它的目的是让我可以了解如何在没有jquery的情况下完成它。
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Focus auto-focus fields
$('.auto-focus:first').focus();
// Initialize auto-hint fields
$('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function(){
if($(this).val() == $(this).attr('title')){
$(this).val('');
$(this).removeClass('auto-hint');
}
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function(){
if($(this).val() == '' && $(this).attr('title') != ''){
$(this).val($(this).attr('title'));
$(this).addClass('auto-hint');
}
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').each(function(){
if($(this).attr('title') == ''){ return; }
if($(this).val() == ''){ $(this).val($(this).attr('title')); }
else { $(this).removeClass('auto-hint'); }
});
});
</script>
</head>
<body>
<form>
Email: <input type="text" name="email" id="email" title="i.e. me@example.com" class="auto-hint" />
</form>
</body>
</html>
我在这里找到了这段代码: Html placeholder text in a textarea form
答案 0 :(得分:2)
你走了:
(function() {
var clss= 'auto-hint',
fields = document.getElementsByClassName(clss),
field;
for (var i = 0; i < fields.length; i++) {
field = fields[i];
field.value = field.title;
field.onfocus = function() {
if (this.value === this.title) {
this.value = '';
this.className = '';
}
};
field.onblur = function() {
if (this.value === '') {
this.value = this.title;
this.className = clss;
}
};
}
})();
现场演示: http://jsfiddle.net/pj5tG/
顺便说一句,HTML5引入了placeholder
属性。它完成了完全相同的工作。但是,它在IE中不起作用(但它适用于Firefox,Chrome,Safari和Opera)。
<input type="text" placeholder="Name">
答案 1 :(得分:0)
Jquery很棒,如果你真的想要,你可以从他们的源中删除代码。但我不推荐它,jquery是js开发人员的一个很好的工具,学习jquery本身就是你应该知道的技能。此外,我不知道jquery的许可证是什么,因此您可能无法仅分发/使用其代码的各个部分。
答案 2 :(得分:0)
执行相同操作,不使用jQuery或类似的库,您将需要编写更多代码。特别是,你需要做更多的工作才能找到由纯粹的CSS选择器INPUT.auto-hint, TEXTAREA.auto-hint
等代表的DOM元素。
要查找与上述选择器匹配的元素,您可能希望遍历文档中的所有input
元素 - 可以使用getElementsByTagName
方法找到它们。然后,您需要查看他们的className
,如果找到匹配项,请使用getAttribute
,setAttribute
等来修改该元素。之后,对所有textarea
元素执行相同的操作。
此时,您应该开始看到需要重构,根据类型和类提取定位元素的部分。此外,您现在应该重新考虑将jQuery添加到组合中;)