從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位置問題

回答

相關問題