Fatal编程技术网
  • jquery/
  • Jquery 清除移动站点表单字段元素上的默认文本

Jquery 清除移动站点表单字段元素上的默认文本

jquery jquery-mobile

Jquery 清除移动站点表单字段元素上的默认文本,jquery,jquery-mobile,blur,onfocus,Jquery,Jquery Mobile,Blur,Onfocus,好的，我正在使用，我希望能够使用文本或文本区域中的默认值作为辅助文本。但在焦点上清除文本并保留新输入的值。此外，还需要重新聚焦（说他们再次错误地触摸了它），以避免再次清除值 包括这些 <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> <script type="text/javascript" src="http://code.jquery.

好的，我正在使用，我希望能够使用文本或文本区域中的默认值作为辅助文本。但在焦点上清除文本并保留新输入的值。此外，还需要重新聚焦（说他们再次错误地触摸了它），以避免再次清除值

包括这些

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
这个例子不起作用

将此添加到页面本身：（）


$（'.default value'）。每个（函数（）{
var default_value=this.value；
$（this.focus（function（））{
if（this.value==默认值）{
这个值=“”；
}
});
$（this.blur（function（））{
如果（this.value==''）{
this.value=默认值；
}
});
});
这是HTML（它也在表单标签中）


地址2
我能够使用jQuery 1.5和jQuery Mobile 1.0a3让您的代码正常工作。您是否包括jQuery和jQuery Mobile？jQuery Mobile需要一个jQuery版本才能工作

编辑：我应该注意，我只是在iPhone模拟器上测试了这个，而不是在实际的设备上。模拟器运行的是iOS 4.0.1

<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script><script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.js" type="text/javascript"></script></head>

<div data-role="fieldcontain">
    <label for="address-2">Address 2</label>
    <input type="text" name="address-2" id="address-2" class="default-value" value="Apt #, Suite #, Floor #"  />
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('.default-value').each(function() {
            var default_value = this.value;
            $(this).focus(function() {
                if(this.value == default_value) {
                    this.value = '';
                }
            });
            $(this).blur(function() {
                if(this.value == '') {
                    this.value = default_value;
                }
            });
        });
    });
</script>


地址2
$（文档）.ready（函数（）{
$（'.default value'）。每个（函数（）{
var default_value=this.value；
$（this.focus（function（））{
if（this.value==默认值）{
这个值=“”；
}
});
$（this.blur（function（））{
如果（this.value==''）{
this.value=默认值；
}
});
});
});
我能够使用jQuery 1.5和jQuery Mobile 1.0a3让您的代码正常工作。您是否包括jQuery和jQuery Mobile？jQuery Mobile需要一个jQuery版本才能工作

编辑：我应该注意，我只是在iPhone模拟器上测试了这个，而不是在实际的设备上。模拟器运行的是iOS 4.0.1

<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script><script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.js" type="text/javascript"></script></head>

<div data-role="fieldcontain">
    <label for="address-2">Address 2</label>
    <input type="text" name="address-2" id="address-2" class="default-value" value="Apt #, Suite #, Floor #"  />
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('.default-value').each(function() {
            var default_value = this.value;
            $(this).focus(function() {
                if(this.value == default_value) {
                    this.value = '';
                }
            });
            $(this).blur(function() {
                if(this.value == '') {
                    this.value = default_value;
                }
            });
        });
    });
</script>


地址2
$（文档）.ready（函数（）{
$（'.default value'）。每个（函数（）{
var default_value=this.value；
$（this.focus（function（））{
if（this.value==默认值）{
这个值=“”；
}
});
$（this.blur（function（））{
如果（this.value==''）{
this.value=默认值；
}
});
});
});
面向子孙后代：HTML5中有一种叫做占位符的东西

<input type="text" name="address-2" placeholder="Apt #, Suite #, Floor #"  />
占位符目前在最新的基于webkit的浏览器中得到支持。

对于后代来说：HTML5中有一种叫做占位符的东西

<input type="text" name="address-2" placeholder="Apt #, Suite #, Floor #"  />
占位符目前在最新的基于webkit的浏览器中受支持。

进一步介绍HTML5的输入占位符属性，该属性的行为与您描述的帮助器文本完全相同；jQuery Mobile建议将标签字段与类“ui hidden Access”一起使用：

为了便于访问，jquerymobile要求所有表单 元素必须与有意义的标签配对

然后可以使用Modernizr检测对占位符属性的支持，如果不支持占位符属性，则使用polyfill（）或删除将显示标签的ui隐藏可访问类

if(!Modernizr.input.placeholder){
$('label.ui-hidden-accessible')
    .removeClass('ui-hidden-accessible')
    .addClass('ui-accessible');
}
然后根据需要设置新标签的样式。我发现当输入字段为type=“password”时，polyfill方法不能很好地工作，因此在这种情况下取消隐藏标签更好。

进一步了解HTML5的输入占位符属性，它的行为与您描述的帮助器文本完全相同；jQuery Mobile建议将标签字段与类“ui hidden Access”一起使用：

为了便于访问，jquerymobile要求所有表单 元素必须与有意义的标签配对

然后可以使用Modernizr检测对占位符属性的支持，如果不支持占位符属性，则使用polyfill（）或删除将显示标签的ui隐藏可访问类

if(!Modernizr.input.placeholder){
$('label.ui-hidden-accessible')
    .removeClass('ui-hidden-accessible')
    .addClass('ui-accessible');
}
然后根据需要设置新标签的样式。我发现，当输入字段为type=“password”时，polyfill方法不起作用，因此在这种情况下，取消隐藏标签更好。

是的，我包括了LIB，除此之外，所有其他方法似乎都起作用。在chromeI的本地测试框中，我添加了上面使用的代码。这个片段对你有用吗？事实上！没有document.ready（）调用。我有时也会忘记这一点。是的，这很有帮助。我需要在HTML之后添加代码。有没有办法将代码添加到标题中呢？我通常将所有JavaScript都放在标题中。我将代码作为外部脚本包含，然后在$（document）.ready（）匿名函数中初始化所有内容。请看一个非常疯狂的例子。是的，我包括libs，除了这个，其他一切似乎都正常。在chromeI的本地测试框中，我添加了上面使用的代码。这个片段对你有用吗？事实上！没有document.ready（）调用。我有时也会忘记这一点。是的，这很有帮助。我需要在HTML之后添加代码。有没有办法将代码添加到标题中呢？我通常将所有JavaScript都放在标题中。我将代码作为外部脚本包含，然后在$（document）.ready（）匿名函数中初始化所有内容。请看一个非常疯狂的例子。哇，知道+1真是太好了哇，知道+1真是太好了