Question

我有一个textarea：

<textarea cols="10" rows="5">Type in the text</textarea>

当我在textarea上点击时，我想在textarea下面显示一个div（或<span>）。

我怎么能这样做？

此外，我想在div（或span）中单击链接时隐藏它。

Answer 1

最基本的方法是给你的跨度一个id，然后：

<textarea cols="10" rows="5" onclick="document.getElementById('box').style.display='inline';">Type your text here</textarea>
<span id="box" style="display:none">display</span>

Answer 2

如果你使用jQuery，那很简单：

$("textarea").bind("focus", function(){
    $("span").show();
});

然后为链接在HTML中提供一个ID：

<span>
    <a href="#" id="closeme">Close me</a>
</span>

然后：

$("#closeme").bind("click", function(){
    $("span").hide();
});

请记住，Javascript必须放在<script></script>标记内，并确保您使用以下命令在页面中包含jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

如果您是jQuery的新手，那么下面的代码可以让您了解如何开始使用。通常，最好使用ID而不是其标记名称来引用元素，例如textarea和span - 这意味着javascript将定位正确的元素。这样的事情会做你喜欢的事情询问：

<html lang="en"> 
<body>

    <textarea id="form-details"></textarea>
    <span id="form-details-info">
        Some info about the textarea
        <br/>
        <a href="#">Close text area</a>
    </span>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>    
    <script>
        $(function(){

           // When a user is using the textarea 
           $("#form-details").bind("focus", function(e){
               // Show the span info
               $("#form-details-info").show();
           });

           // When a user clicks the close link
           $("#form-details-info a").bind("click", function(e){e){

               // Hide the info
              $("#form-details-info").hide();

              // And use this to stop a prevent a link from doing what it normally does..
              e.preventDefault(); 
           });

        });
    </script>
</body>
</html>

onClick on textfield显示div？

2 个答案: