Question

我正在创建一个密码字段，从＆＃34;密码＆＃34;到＆＃34;文字＆＃34;使用时当用户使用密码字段时，＆＃34;屏蔽＆＃34;来自密码字段并显示他们输入的内容（斜体 - 这很重要）。此temporary unmasking是销毁确认密码字段的动作的一部分。

我已经fiddle显示了我的问题。

HTML

<div class="input-container input-container--text">
    <label for="input-password"><i class="fa fa-key fa-lg"></i><span>Password</span></label>
    <input type="text" class="input-password" name="input-password">
    <div class="message">A message goes here</div>
</div>

JS

$(document).on('focus', '.input-password', function(){
    $(this).attr('type', "text");
});  
$(document).on('blur', '.input-password', function(){
    $(this).attr('type', "password");
});

当用户关注密码字段时，它显示为文本。当用户从密码字段中取消（模糊）时，该字段会将属性更改为password而不是text。

现在问题。如果用户再次点击密码字段，您会注意到字段中的凹凸或移动以及＆＃34;图标＆＃34;在它的一边。只要我注意到，这只会发生在Chrome中。

是否有理由或解决此问题？

更新

我已经玩了更多的CSS并找到了＃34;问题＆＃34;。这个CSS：

.input-container:last-of-type {
    border-bottom:0;
    padding-bottom:0;
    margin-bottom:0;    
}

如果我删除padding-bottom:0;我就不会再碰到了。我不确定为什么，因为这不应该触及实际输入。如果有人有任何见解，那就太棒了。

谢谢！

Answer 1

我发现...... .input-container input { 中的CSS input似乎迷路了......

我更新了this link并为元素添加了许多边框颜色，以便找到这个＆＃34;偏移＆＃34;是应用还是丢失。我还对top: 3px;提出了不透明度。

我确认这种情况发生在Chrome 51和Opera 38中在FF 47，IE 11，Safari 5中不。

你发现了一个错误!!!
;）

注意：修复方法是从.input-container input {中删除此label，因为您的top:5px已经定义了String selectedTimeStamp = "2016-07-04 21:09:47.6"; SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss.SSS", Locale.US); Date parsedDate = sdf.parse(selectedTimeStamp); System.out.println("parsedDate: " + parsedDate); Timestamp timestamp = new java.sql.Timestamp(parsedDate.getTime()); System.out.println("createdTime: " +timestamp);。

Chrome Bug？从＆＃39;密码＆＃39;切换输入attr到＆＃39;文字＆＃39;显示运动/碰撞

1 个答案: