占位符在焦点上保持可见
Placeholder remains visible on focus
我希望我的<input>
元素具有占位符文本,该文本在输入具有焦点(并且为空)时保持可见。然而,我不能使用实际的placeholder
属性,因为它只在输入没有焦点时显示在IE10和Safari中,并且在旧版本的IE中不支持。什么是跨浏览器解决方案,最好不要使用jquery(因为我没有其他理由使用它)?
如果您可以使用jQuery,这里有一个选项
演示http://jsfiddle.net/kevinPHPkevin/FdjJv/8/
$(function()
{
$('input').each(function()
{
$(this).val($(this).attr('holder'));
});
$('input').focus(function()
{
if($(this).attr('holder')==$(this).val())
{
$(this).val('');
}
});
$('input').focusout(function()
{
if($.trim($(this).val())=='')
{
var holder = $(this).attr('holder');
$(this).val(holder);
}
});
});
对于完整的浏览器支持,您可以使用库,例如http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
已编辑
我推荐一个jQuery插件,然后你可以将其分配给你的输入
演示http://jsfiddle.net/kevinPHPkevin/5j55m/136/
<input type='text' placeholder='this is a test' />
<input type='password' placeholder='testing password' />
使用jQuery找到了此解决方案。。http://jsfiddle.net/NXAWW/
为用户输入文本时保持可见的输入创建html水印文本:
关键是这个
.keyup(function(){
var $input = $(this);
if ($input.val().trim() != '') {
$placeholder.val($input.val().trim() + $input.attr('placeholder').replace('test',''));
//$placeholder.val('');
} else {
$placeholder.val($input.val().trim() + $input.attr('placeholder').replace('test',''));
}
});
完整Jquery代码
// Create placeholder input to serve as background
var $test = $('#test');
var $placeholder = $test.clone().removeAttr('id').removeAttr('placeholder').addClass('placeholder').val($test.attr('placeholder'));
var $container = $('<span class="placeholder-container"></span>');
$container.insertAfter($test).append($test).append($placeholder);
// Basic styling
$container.css({
position: 'relative'
});
$test.css({
position: 'absolute',
left: 0,
top: 0,
zIndex: 100,
backgroundColor: 'transparent',
borderColor: 'transparent'
});
$placeholder.css('color', 'transparent');
// Behavior for focus and blur to achieve the visual effect
$test.focus(function(){
var $input = $(this);
var $placeholder = $('.placeholder', $input.parent());
$placeholder.css('color', '#e0e0e0');
}).blur(function(){
var $input = $(this);
var $placeholder = $('.placeholder', $input.parent());
if ($input.val() == '')
$placeholder.css('color', 'transparent');
}).keyup(function(){
var $input = $(this);
if ($input.val().trim() != '') {
$placeholder.val($input.val().trim() + $input.attr('placeholder').replace('test',''));
//$placeholder.val('');
} else {
$placeholder.val($input.val().trim() + $input.attr('placeholder').replace('test',''));
}
});
相关文章:
- 使用javascript的Asp.net内容占位符
- Internet Explorer缺少占位符支持,特别是密码字段
- 如何隐藏按钮单击事件上的占位符
- 需要URL模板占位符查找和替换功能的输入
- 初始化ng模型时,Angular ui选择占位符不起作用
- 如何在ie7或更高版本中设置密码字段的占位符
- 在不使用javascript的情况下,可以在表单字段中设置文本占位符(以提示最终用户插入特定格式)
- Select2-使用自定义模板时不显示占位符
- 替换字符串中的占位符值
- 为什么我应该使用HTML5(上下文:占位符)
- 在contentEditable元素中居中占位符插入符号
- 从气球弹出窗口中删除占位符
- 如何删除焦点上的占位符
- 占位符在焦点上保持可见
- 如何正确地控制或对表单字段焦点上的占位符执行某些操作
- 在IE10中,文本区占位符不会在焦点/输入时消失
- 如何使用jQuery删除焦点上的输入占位符文本
- 隐藏输入字段占位符(文本框水印)的焦点后一秒钟
- jQuery占位符/提示JavaScript保持提示的焦点
- 如何在焦点上显示占位符文本