从javascript动态生成的DIV位置问题

这里我从javascript生成一个div并将其放置在文本框中。从javascript动态生成的DIV位置问题

我发现两个问题 1）我的代码只适用于IE。 2）div中的文本没有垂直居中放置。

这是我的代码。

<html xmlns="http://www.w3.org/1999/xhtml" > 
    <head id="Head1" runat="server"> 
    <title>Untitled Page</title> 
    <script type="text/javascript" language="javascript"> 
    var modalWindow = null; 

    function drawDiv() { 
    var txt = document.getElementById('TextBox1'); 
    var dime = new Dimension(txt); 
    modalWindow = document.createElement('div'); 
    modalWindow.style.position = 'absolute'; 
    modalWindow.setAttribute("align", "center"); 
    modalWindow.setAttribute("vertical-align", "middle"); 
    modalWindow.innerHTML = '<p>hello...</p>'; 
    modalWindow.style.left = dime.x; 
    modalWindow.style.top = dime.y; 
    modalWindow.style.width = dime.w; 
    modalWindow.style.height = dime.h; 
    modalWindow.style.backgroundColor = '#C0C0C0'; 
    document.body.appendChild(modalWindow); 
    return false; 
    } 

    function hider(whichDiv) { 
    document.getElementById(modalWindow).style.display = 'none'; 
    } 

    function Dimension(element) { 
    this.x = -1; 
    this.y = -1; 
    this.w = 0; 
    this.h = 0; 
    if (element == document) { 
     this.x = element.body.scrollLeft; 
     this.y = element.body.scrollTop; 
     this.w = element.body.clientWidth; 
     this.h = element.body.clientHeight; 
    } 
    else if (element != null) { 
     var e = element; 
     var left = e.offsetLeft; 
     while ((e = e.offsetParent) != null) { 
     left += e.offsetLeft; 
     } 
     var e = element; 
     var top = e.offsetTop; 
     while ((e = e.offsetParent) != null) { 
     top += e.offsetTop; 
     } 
     this.x = left; 
     this.y = top; 
     this.w = element.offsetWidth; 
     this.h = element.offsetHeight; 
    } 
    } 
    </script> 
</head> 
<body> 
<div> 
<form id="form1" runat="server"> 

    <asp:TextBox ID="TextBox1" runat="server" Height="180px" Style="left: 307px; position: relative; 
     top: 264px" TextMode="MultiLine" Width="432px"></asp:TextBox> 
    <asp:Button ID="Button1" runat="server" 
     Text="Button" OnClientClick=" return drawDiv()" /> 
</form> 
</div> 
</body> 
</html>

基本上，我试图在多行文本框中放置一个div，以防止用户访问该多行文本框。我的代码在IE中工作正常，但在Firefox中无法正常工作。当我在Firefox中运行代码时，div在文本框中没有正确获取位置。我认为我的JavaScript不是交叉浏览器。所以请纠正我的JavaScript，使其交叉浏览器。

感谢

来源

2010-11-17 Thomas

那么，如果你需要阻止用户访问表单元素，那么为什么不只是禁用它呢？ – 2010-11-17 09:10:47

为什么你想要阻止访问？为什么不禁用文本框或根本不使用文本框？ – 2010-11-17 09:11:28

的Javascript

function disable(id) { 
    var txt = document.getElementById(id); 
    txt.disabled = true; 
    return false; 
}

ASP

<asp:Button ID="Button1" runat="server" Text="Button" 
    OnClientClick="return disable('TextBox1')" />

注意：您也可以隐藏文本框，如果你想。

来源

2010-11-17 09:33:14 galambalazs

我知道有各种各样的方式来防止用户访问输入控件，但我想在上面的JavaScript中做到这一点。我会很高兴，如果任何人都可以使我的JavaScript crossbrowser。 – Thomas 2010-11-17 10:50:37

如果你想以一种丑陋的方式解决所有问题，就这样做吧。 :)但是不要浪费别人的时间。 – galambalazs 2010-11-17 11:40:58

@ user508127：如果你想从一楼走到一楼，你总是坐飞机？当其他人（可能更有经验的人）以其他方式给你建议时，你为什么坚持这样做？ – 2010-11-17 14:31:36

从javascript动态生成的DIV位置问题

回答

相关问题