问答详情
源自：6-5 光标聚焦事件（onfocus）

我这里有什么地方不对吗？

<!DOMTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js编程练习</title>
             <!--css begin-->
	<style type="text/css">
	    *{margin: 0 ; padding: 0; font-family: "宋体"}
            #main{ border: 2px solid red; height: 100%;}
            #showmore{
	        position: absolute;
	        top: 5%;
	        left: 25%;
	        border-top: 1px solid blue;
	        border-right: 1px solid blue;
	        border-left: 1px solid blue;
	        background: white;
	        width: 400px;
            }
	</style>
	   <!--css end-->
	    <!--这是内部JS代码-->
	<script type="text/javascript">
	    //光标失焦
	    function showOnblur() {
	        var sob = document.getElementById("showmore");//通过id获取
	        sob.style.display = "none";//隐藏内容
            }
            
            //光标聚集
            function moreOnfocus() {
	        var mof = document.getElementById("showmore");
	        mof.style.display = "block";  //显示内容
            }
	</script>
	    <!--内部js end-->
</head>

<body>
    <div id="main">
	    <p id="mainp" >简介：做为WEB攻城师必备技术JavaScript，
		本课程从如何插入JS代码开始，学<span id="more1" onfocus="moreOnfocus()" >[更多]<span></p>
	    <div id="showmore" onblur="showOnblur()" >简介：做为W
		EB攻城师必备技术JavaScript，本课程从如何插入JS代码开始，
		学习JS基础语法、语法、函数、方法等，让你掌握JS编程思路、
		知识的使用等，实现运用JS语言为网页增加动态效果，达到与
		用户交互的目的。</div>
	</div>
</body>
</html>


为什么#showmore的内容没有隐藏。。。

提问者：Erkeleteyin 2016-10-27 09:19

个回答

  • Sheryl要做优秀的UID
    2016-10-27 10:05:09
    已采纳

    onfocus onblur事件只对于文本框有效


     

    0
  • Sheryl要做优秀的UID
    2016-10-27 10:06:54

    <!DOMTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js编程练习</title>
             <!--css begin-->
    <style type="text/css">
        *{margin: 0 ; padding: 0; font-family: "宋体"}
            #main{ border: 2px solid red; height: 100%;}
            #showmore{
            position: absolute;
            top: 5%;
            left: 25%;
            border-top: 1px solid blue;
            border-right: 1px solid blue;
            border-left: 1px solid blue;
            background: white;
            width: 400px;
	    display:none; //先隐藏
            }
    </style>
       <!--css end-->
        <!--这是内部JS代码-->
    <script type="text/javascript">
        //光标失焦
        function moreOnfocus() {
            var sob = document.getElementById("showmore");//通过id获取
            sob.style.display = "block";//显示内容
            }
             
            //光标聚集
            function showOnblur() {
            var mof = document.getElementById("showmore");
            mof.style.display = "none";  //隐藏内容
            }
    </script>
        <!--内部js end-->
</head>
 
<body>
    <div id="main">
        <p id="mainp" >简介：做为WEB攻城师必备技术JavaScript，
        本课程从如何插入JS代码开始，学<br>
        <input type="text" id="more1" value="更多" onfocus="moreOnfocus()" >
        </p>
        <textarea id="showmore" rows="5" cols="6" placeholder="简介：做为WEB攻城师必备技术JavaScript，本课程从如何插入JS代码开始，学习JS基础语法、语法、函数、方法等，让你掌握JS编程思路、知识的使用等，实现运用JS语言为网页增加动态效果，达到与用户交互的目的" onBlur="showOnblur()"></textarea>
    </div>
</body>
</html>


    2