Question

我对可调整大小的div组合的不同行为有疑问。

通常：我有两个可调整大小的div。我绑定onmouseleave事件。事件发生时，请匹配两个div的大小。

现在的行为：

Firefox（我建议正确）：调整大小时，它将触发操作系统拖动光标。拖动时，您可以移动您的光标在div之外。 ounmouseleave事件将触发一旦释放鼠标，实际调整大小就会结束。
Chrome / Opera：调整大小不会触发操作系统拖动器光标。调整大小有点延迟。此外，在调整大小期间，
元素还会检查鼠标事件，因此在停止调整大小后，您可以必须实际重新输入并重新离开div才能触发正确的调整大小。
Edge：根本不起作用，Edge忽略了调整大小：水平打开 div。

这是一个小提琴：

<div class="a" style="color: rgb(127, 184, 0); resize: horizontal; overflow: auto; min-width: 50%; background: rgb(127, 184, 0); border: none; border-radius: 3px; width: 400px; height: 14px !important; min-height: 14px !important;"></div>
<br>
<br>
<br>
<br>
<div class="a" style="color: rgb(127, 184, 0); resize: horizontal; overflow: auto; min-width: 50%; background: rgb(127, 184, 0); border: none; border-radius: 3px; width: 400px; height: 14px !important; min-height: 14px !important;"></div>

function fc(){
var d = document.getElementsByClassName("a");
for(var i = 0; i< d.length; i++){
d[i].onmouseleave = function() { setTxtWidth(this); };
}
}
fc();

function setTxtWidth(txt) {
var x = document.getElementsByClassName("a");

for (var j = 0; j < x.length; j++) {
  x[j].style.width = txt.clientWidth + "px";       
 }
}

http://jsfiddle.net/01tjL672/1/

任何想法，如何将解决方案统一起来，使其与Firefox中的工作方式相同？只需添加三件事：

我只需要使用普通的javascript，html和CSS。这在 Tempermonkey和我不想使用任何其他库。
我不能为此使用textarea，因为textarea对于宽度。在实际解决方案中，此可调整大小的元素必须完全匹配父元素。我尝试使用textarea，但将clientWidth设置为第二个文本区域的宽度不起作用，因为它从来都不一样值，最后那两个文本区域不完全匹配（在小提琴中，尝试将div编辑为文本区域。然后调整一个大小，匹配它们，然后不断在两个区域上移动。在chrome / opera中，它们将以FF形式切分他们会成长）
我也尝试过onmouseup事件，希望它会在释放时触发，但这又是一样的，Opera / Chrome会与调整大小分开触发它，因此您必须在调整ned大小后返回元素并触发一次再次。

那么，有什么想法，如何实现呢？预先谢谢你

可调整大小的div，带有onmouseleave事件跨浏览器

0 个答案: