我正在尝试编写一个模拟占位符的简单脚本,以便我可以在所有浏览器上使用该效果.我设置的是一个带有跨度的表单,其中包含一些文本,我绝对定位于输入.这类似于占位符文本.
现在Jquery很容易,如果我为每个输入元素写出单独的函数,我可以使它工作正常,但这有点多余.我想要做的是使用each()和children()以及类,以便我可以将它应用于我想要的任何形式.这是代码：
<form id="signupForm" name="signupForm">
<span class="inputSpan">
<input value="" class="input" name="fistName" id="firstName" type="text" />
<span class="inputText" id="inputText">First name</span>
</span>
<span class="inputSpan">
<input value="" class="input" name="lastName" id="lastName" type="text" />
<span class="inputText" id="inputText">Last name</span>
</span>
</form>
<script type="text/javascript">
$('.inputSpan').each(function() {
$(this).children('.inputText').click(function(index) {
$(this).children('.inputText').hide();
$(this).children('.input').focus();
});
});
</script>
如果我在每个函数中放置一个警告语句,它可以正常工作,但它没有执行其余部分,即隐藏子类’.inputText’并专注于另一个子’.input’我猜它有什么东西一旦在函数内部再次调用$(this)就无法做到.任何人对如何让这个工作有任何想法？
解决了！！！谢谢马特
这是最终的工作代码,如果输入留空,则可以将占位符文本放回原位.
<script type="text/javascript">
$('.inputSpan').each(function() {
var $input = $(this)
$(this).children('.inputText').click(function(index) {
$input.children('.inputText').hide();
$input.children('.input').focus();
});
$(this).children('.input').focusout( function() {
if ($input.children('.input').attr('value') == '') {
$input.children('.inputText').show();
}
});
});
</script>
解决方法
未经测试,但我相信你有一个与$(this)相关的范围问题
$('.inputSpan').each(function() {
var $input = $(this)
$(this).children('.inputText').click(function(index) {
//within this click handler,$(this) refers to the the '.inputText' not '.inputSpan'
$input.children('.inputText').hide();
$input.children('.input').focus();
});
});
