在Javascript中隱藏和顯示文本框

我想隱藏並使用下面的代碼顯示框。這項工作，但框是默認顯示。我可以隱藏該框並僅在點擊時顯示嗎？目前onclick可以隱藏框。在Javascript中隱藏和顯示文本框

<script type="text/javascript"> 
function display(id) { 
var obj = document.getElementById(id) 
if (obj.style.display == "none") { 
obj.style.display = "block" 
    } 
else { 
    obj.style.display = "none" 
    } 
return false 
} 
</script> 

<form> 
<input type="button" value="Customize" onclick="display('box1_<?=$pd_id?>')"> 
<input type="submit"> 
</form>

來源

2013-05-19 Raj K

您點擊哪個精確元素來顯示哪個元素？提示：JavaScript是*客戶端*，PHP是*服務器端*，並且幾乎總是與HTML，CSS和JavaScript問題無關。當顯示JavaScript的HTML代碼時（並且認真地，顯示代碼的榮譽！），請顯示瀏覽器看到的HTML（查看源代碼或從開發人員工具中的DOM中），*不要* PHP腳本。 –

addthe去做。

來源

2013-05-19 16:08:39

1）當然，只要添加一個樣式或CSS類的對象。

<input type="button" style="display:none" value="Customize" onclick="display()">

2）只要精確從事件的元素：

function display(evnt) { 
    var obj = evnt.target; 
    obj.style.display = (obj.style.display === 'none') ? 'block' : 'none'; // (cond) ? <do> : <else> 
}

的jsfiddle例如工作示例（忽略getDocument線，當然，一旦你隱藏無法看到它了..;）

http://jsfiddle.net/BRa9n/

來源

2013-05-19 16:03:20

您可以使用CSS，並添加：<div id="your_box" style="display:none;"></div>最初將被隱藏，onclick()更改屬性到display:block

來源

2013-05-19 16:06:57 ntstha

你可以保持隱藏着'visibility: hidden' or 'display: none'的框，然後onclik之後無論是在樣式表或內嵌樣式

style="display: none;"

來源

2013-05-19 16:07:31 Rahul11

當然，你可以使用object.style.visibility="hidden"的屬性更改爲visibility = 'visible';

來源

2013-05-19 16:11:20 soxfmr

它，當然，能夠做到這一點沒有JavaScript（雖然在HTML變得有點複雜，並且在支持依賴爲:checked僞選擇鑑於HTML：

<form> 
    <label class="button" for="customize">Customize</label> 
    <input type="checkbox" id="customize" /> 
    <input id="submit" /> 
</form>

而CSS：

label.button { 
    padding: 0.2em 0.4em; 
    -webkit-appearance: button; 
} 

#customize { 
    display: none; 
} 

#customize + #submit { 
    display: none; 
} 

#customize:checked + #submit { 
    display: inline-block; 
}

JS Fiddle demo

參考文獻：

來源

2013-05-19 16:31:44

在Javascript中隱藏和顯示文本框

回答

相關問題