问题:
placeholder在火狐, 谷歌与在IE11(windows7版本的IE11)表现形式有差异, 具体表现为在IE11上点击输入框placeholder的提示信息会消失, 而在火狐和谷歌上不会消失. 怎么做才能统一浏览器的表新形式(获取焦点不消失--IE/获取焦点消失).
需求一:
input输入框获取焦点后文字提示信息依然存在, 在输入数据时提示信息消失, 要求IE11+Chrome+Firefox(48以上)表现一致.
需求二:
input输入框获取焦点后文字提示信息消失. 要求同上.
实现:
(需求二在网上有很多实现, 在此省略, 这里主要讨论需求一)
解决办法:
放弃使用placeholder, 在input标签下添加一个<span>, 代码介绍如下:
<div><input/><span>提示信息...</span></div>
上述代码<div>相对布局, <span>绝对布局, 然后通过top+left属性定位, 这样下来表面工作还不错, 但是当点击输入框和点击输入框上的<span>上的提示信息时, 输入框获取不到焦点, 于是又给<span>添加了一个onClick事件, 在该事件中通过如下代码使输入框获取焦点:
const node = e.currentTarget.parentNode;
const inputNode = node.children[0];
inputNode.focus();
接下来, 当输入框输入数据是只要在<input/>的onChagnge方法中将提示信息清除即可.
经过上述步骤, 需求一基本完成.
需求三:
在需求一完成基础上, 如果提示信息超出输入框, 可以通过css3将超出文本信息设置为省略号, css代码如下:
white-space: nowrap; // 处理元素内的空白,禁止折行
overflow: hidden; // 内容益处会被修剪，并且其余内容是不可见的
text-overflow: ellipsis; // 文本超出包含元素用省略号代表被修剪的文本
如此问题又来了 --- 为适应不同分辨率, 输入框的宽度会随屏幕分辨率大小不同而发生变化, <span>标签不可能用固定的宽度, 所以这里<span>宽度应该继承父元素宽度, 即
inherit, 这样做的结果就是, 文本信息从前到后出现在输入框, 省略号早已超出 输入框,如下图所示:
于是乎, 只好给<span>标签添加个内边距搞定, 如下图:
(点击该搜索框会变长, 然后自然就看到所有提示信息, 输入数据提示信息消失)
