在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中隐藏和显示文本框

回答

相关问题