2014-09-24 29 views
-2

在使用某些javascript來計費和遞送地址表單時,我使用了;爲什麼要使用style.visibility ='hidden'來代替style.display ='none'

document.getElementById(itm.name + "Hint").style.visibility = 'hidden'; 

成功地切換含有暗示田間如果留空一個元件的可見性。問題是,當提示消失時,它佔據的空間不是!在一些頭部劃痕之後,我查看了一些早先寫的代碼,當用戶勾選「發送到結算地址」時,它隱藏了所有送達地址的字段,我意識到我已經使用了;

document.getElementById(itm.name + "Hint").style.display = 'none'; 

這是我的大綱顯示/隱藏功能,它從輸入字段onkeyup事件觸發。我使用正則表達式來忽略空白鍵入到字段

var notEmpty = /^\s*$/; // Match all whitespace 

function isFieldEmpty(itm) { 
    if(notEmpty.test(itm.value)) { 
     document.getElementById(itm.name + "Hint").style.display = 'inline'; // Hint visible 
    } else { 
     document.getElementById(itm.name + "Hint").style.display = 'none'; // Hint hidden 
    } 
} 

這是包含場提示字段&的HTML。你可以通過在提示後輸入一些文本來自己嘗試,並且一旦你在第一個字段中輸入任何字符,就會看到它向上移動到提示佔用的空間中。

<input name="firstName" type="text" tabindex="1" value="" onkeyup="isFieldEmpty(this)" /> 
<span id="firstNameHint" class="hint"><br />Please type a first name</span> 

更新24 9月14日:注意到downvotes和閱讀這個問題是重複的,請接受我的道歉。前面的問題在我輸入時未在可能的問題列表中標出,我在想要切換顯示臨時文本的環境中創建它,這在前面的問題中沒有涉及。

+0

請參閱http://www.w3schools.com/css/css_display_visibility.asp – 2014-09-24 11:02:08

回答

1

某些時候佈局可能會因添加和刪除元素而受到干擾,也許這是您可以使用可見性選項的情況。如果您不想在隱藏元素後更改佈局,則應使用visibility: hidden;,否則使用display: none;

+0

非常感謝您的反饋,如果佈局非常流暢,我可能會更關心一些問題,我的嘗試將其作爲瀏覽器客戶端的屏幕分辨率訪問我的網頁可能差別很大。 – AndrewB 2014-09-24 17:57:46

0

我不知道,但標籤的你不能價值觀是其顯示:沒有,但你可以用隱藏的可見性改變,它可以使用存儲的值或者導致要使用,但不希望顯示

相關問題