我们经常会有,输入框内容显示会显示不全,如下图
这时候我们通常会在鼠标移动到输入框时,显示一个浮动窗来显示里边的内容,方便查看
具体怎么实现呢 ? 其实很简单 ,上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="format-detection" content="telephone=no">
<title>显示内容</title>
</head>
<body>
<!-- built files will be auto injected -->
<div ><input id="input" placeholder="请输入内容" width="100%"/></div>
<div ><input id="input1" placeholder="请输入内容" width="100%"/></div>
<div id="floatDiv" style="display: none; position: absolute; background-color: aqua; width: 50%;"></div>
<script>
window.onload = function (){
var inputId = ['input','input1'];//需要浮动显示内容的input id
var floatDiv = document.getElementById('floatDiv');
for(var k = 0; k < inputId.length; k++ ){
var input = document.getElementById(inputId[k]);
//显示浮动窗
input.onmouseover = function (ev){
var windowEvent = window.event; //避免windowEvent丢失
setTimeout(function(){
floatDiv.innerText = ev.toElement.value || '(空)';
floatDiv.style.display = 'block';
var mousePosition = getMousePos(windowEvent); //获取鼠标位置
floatDiv.style.left = mousePosition.x + 'px';
floatDiv.style.top = mousePosition.y + 'px';
},200);
};
//隐藏浮动窗
input.onmouseout = function (ev) {
floatDiv.style.display = 'none';
};
}
};
//获取鼠标相当于文档位置
function getMousePos(event) {
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
//alert('x: ' + x + '\ny: ' + y);
return { 'x': x, 'y': y };
}
</script>
</body>
</html>
感谢您的阅读！如果文章中有任何错误，或者您有更好的理解和建议，欢迎和我联系！
