清除移动网站表单域元素上的默认文本
好的，我正在使用jQuery Mobile framework，并且我希望能够使用文本或文本区域中的默认值作为帮助文本。但在焦点上，清除文本并保留新输入的值。另外，重新聚焦(说他们错误地再次触摸了它)，以不再清除该值。
我把这些都包括在内
<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>这个例子不起作用。
将此代码添加到页面本身：(link to example)
<script type="text/javascript">
$('.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>这是HTML (它也在一个表单标签中)
<!-- Address 2 -->
<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>回答 3
Stack Overflow用户
发布于 2011-02-15 01:35:30
我能够让你的代码在Mobile1.5和jQuery jQuery 1.0a3上工作。你有没有把jQuery和jQuery手机包括在内？jQuery手机需要一个版本的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>Stack Overflow用户
发布于 2011-02-15 16:27:28
对于后代:在HTML5中有一种叫做占位符的东西
<input type="text" name="address-2" placeholder="Apt #, Suite #, Floor #" />占位符目前在最新的基于webkit的浏览器中受支持。
Stack Overflow用户
发布于 2012-07-04 16:53:29
除了HTML5的输入占位符属性，它的行为与您描述的助手文本完全一样；jQuery移动推荐使用带有“ui-hidden-accessible”类的标签字段：
出于可访问性的考虑，jQuery
要求所有表单元素都必须与有意义的标签配对
http://jquerymobile.com/demos/1.1.0/docs/forms/docs-forms.html
然后，您可以使用现代工具来检测对占位符属性的支持，如果不支持，则使用polyfill (like this one)或删除将显示标签的ui-hidden-accessible类。
if(!Modernizr.input.placeholder){
$('label.ui-hidden-accessible')
.removeClass('ui-hidden-accessible')
.addClass('ui-accessible');
}然后根据需要设置新标签的样式。我发现当输入字段为type="password“时，polyfill方法不能很好地工作，因此在这种情况下取消隐藏标签会更好。
https://stackoverflow.com/questions/4995151
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号