发新贴  快速回复

关于模拟placeholder,点击文字文本框不能获得焦点的问题

  juntaoshuai
2017-01-18 20:51
 本帖最后由 juntaoshuai 于 2017-1-18 20:53 编辑 

最近做表单验证,用了placehoder,对于低版本浏览器,我就用个p标签绝对定位到文本框上,并用js 当点击提示文字时,使文本框获得焦点(点击文本框内文字外其它地方是可以获得焦点的),但当我做时,我发现真的不是我想像的那样,不信你们试试,文本框竟然不能获得焦点,竟然还失去了焦点,我问了群里人,他们有的人也说遇到这个问题,说解决不了,无视他。但是我就是一根筋,虽然产品说低版本就不显示提示信息了,但是这样用户体验真的不好,这个问题困扰我好久了,我一定要解决。无意中看到妙味官网的登录,注册表单,它竟然没问题,它也是模拟placeholder功能,它提示文字和文本框全部用的是定位,当然文本框可以不用定位,我也这样做,但是点击文字 ,文本框仍然不能获得焦点。
跪求妙味老师和知道的同学,告诉我妙味官网是怎么做到的,而且它兼容性很好,在IE7下都没问题????我看了它的代码表单是用js生成的,而且压缩了。
附在我实现的代码。
<div class="login-form-group clearfix">
      <label><i class="ico-accout"></i></label>
     <input type="text" name="userid" id="username" placeholder="请输入用户名/邮箱/手机">
</div>
js:
    var placehold = function() {
        supportPlaceholder = 'placeholder' in document.createElement('input');

        if (!supportPlaceholder) {
            //页面一加载如果文本框值不为空,则清空placeholder
            $(".login-form-group :text").each(function() {
                    var hold = $(this).attr("placeholder");
                    $('<p class="f-placeholder">' + hold + '</p>').insertAfter($(this));
                })
                .on("keydown keyup", function() {
                    if ($(this).val() != "") {
                        $(this).siblings(".f-placeholder").hide();
                    } else {
                        $(this).siblings(".f-placeholder").show();
                    }
                }).trigger("keydown");

            $(".f-placeholder").click(function() {
                $(this).prev().focus();
            });

        }
    }
    placehold();


css:
.f-placeholder {
    -moz-user-select: none;
    color: #b5b5b5;
    cursor: text;
    font-size: 12px;
    width:100%;
    height: 28px;
    left: 0;
    line-height: 28px;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: 1;
}


 
juntaoshuai
知道的亲们,回答一下吧,文本框不能获得焦点,是不是文本框有这个默认行为,明知非常简单的事件,就是不能做到。
2017-02-05 10:31  回复本帖
 
juntaoshuai
点击文本框是可以获得焦点的,这个是毫无疑问的,但是点击文字就不能,反而失去焦点。
2017-02-05 10:32  回复本帖
849800875
文字是放在p标签里边的对吧?p标签是定位在输入框上边的,那么你点击文字的时候点击的是p标签输入框自然是获取不到焦点的,可以尝试一下把输入框定位在p标签上。
2017-02-05 10:48  回复本帖
 
juntaoshuai
forum.php?mod=redirect&goto=findpost&pid=119206&ptid=52909
文字是放在p标签里边的对吧?p标签是定位在输入框上边的,那么你点击文字的时候点击的是p标签输入框自然是 ...

这样文字层级比文本框低,就看不到了。
2017-02-05 21:45  回复本帖
 
juntaoshuai
我加了获取焦点啊:
 $(".f-placeholder").click(function() {
                $(this).prev().focus();
            });
2017-02-05 21:48  回复本帖
 
juntaoshuai
forum.php?mod=redirect&goto=findpost&pid=119239&ptid=52909
这样文字层级比文本框低,就看不到了。

[table=98%]
[tr][td]我加了获取焦点啊:
$(".f-placeholder").click(function() {
                $(this).prev().focus();
            });[/td][/tr]
[/table]
2017-02-05 21:49  回复本帖
TrueLeo
forum.php?mod=redirect&goto=findpost&pid=119241&ptid=52909


移动端上有很多比这个更有意思的bug,一根筋的人适合去研究移动端的,我发的一个问题是滑屏的,有时间可以去帮我研究研究怎么解决。overflow:auto;在安卓下没有回弹效果,有些还没有滚动条。怎么破。    还有,你的这个问题,我觉得不知道怎么说。从头到尾不明白你要表达什么,以后这种复杂的问题直接上代码了事。
2017-02-06 16:34  回复本帖
TrueLeo
forum.php?mod=redirect&goto=findpost&pid=119239&ptid=52909
这样文字层级比文本框低,就看不到了。

文字层比文本框低也是可以看见的,文本默认不是透明的?你该不会加个白色背景上去吧。
2017-02-06 16:40  回复本帖
 
juntaoshuai
forum.php?mod=redirect&goto=findpost&pid=119256&ptid=52909
文字层比文本框低也是可以看见的,文本默认不是透明的?你该不会加个白色背景上去吧。
 ...

设置文本框 background:transparent;  在ie8下有问题,文字直接看不到了。

2017-02-06 20:28  回复本帖
 
juntaoshuai
我把代码上传了
2017-02-06 20:50  回复本帖
 
juntaoshuai
你们都看下,第一个 手机/邮箱 的文本框 点击在文字 上时,不能获得焦点,不知道是不是 邮箱 后缀提示对它有影响。
如果按照 你们说的,把文本框设为透明,然后把文字定位到文本框下面,则在IE8下有问题,文字显示 不了。
样式放在main.css里。
2017-02-06 20:53  回复本帖
 
juntaoshuai
一回家,我就只想快点把代码整理好,上传。
2017-02-06 20:54  回复本帖
TrueLeo
forum.php?mod=redirect&goto=findpost&pid=119264&ptid=52909
一回家,我就只想快点把代码整理好,上传。

$("form input.txt").each(function() {
                    var hold = $(this).attr("placeholder");
                    $('<p class="f-placeholder">' + hold + '</p>').insertAfter($(this));
                }).on("keydown keyup", function() {
                    if ($(this).val() != "") {
                        $(this).siblings(".f-placeholder").hide();
                    } else {
                        $(this).siblings(".f-placeholder").show();
                    }
                }).trigger("keydown");


看到红色字没有,这里两个事件,需要对应两个函数吧,你上面只有一个,相当于down up都是一样的。其它代码具体我没看,我就看到这里有问题,我把keyup删除,在ie8下测试了下差不多正常了。

2017-02-06 21:19  回复本帖
TrueLeo
forum.php?mod=redirect&goto=findpost&pid=119263&ptid=52909
你们都看下,第一个 手机/邮箱 的文本框 点击在文字 上时,不能获得焦点,不知道是不是 邮箱 后缀提示对它 ...

input的背景直接设置为none,这样百分百好,我试了.   background:none;
2017-02-06 21:36  回复本帖
 
juntaoshuai

TrueLeo 2017-02-06 21:36发表的内容:

forum.php?mod=redirect&goto=findpost&pid=119263&ptid=52909
你们都看下,第一个 手机/邮箱 的文本框 点击在文字 上时,不能获得焦点,不知道是不是 邮箱 后缀提示对它 ...

input的背景直接设置为none,这样百分百好,我试了.   background:none;
我试了不行啊,IE8中文字 看不到。background:none不管用
2017-02-07 23:09  回复本帖
登录 后才可以发表回复