onClick 文本字段显示 div？

发布于 2024-12-03 17:37:43 字数 240 浏览 1 评论 0原文

我有一个文本区域：

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

当 onclick 文本区域时，我想在文本区域下方显示一个 div （或）。

我怎么能这样做呢？

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

原文

I have a textarea:

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

I want to show a div (or a <span>) below the textarea when onclick on the textarea.

How could I do this?

Also I would like to hide it when a link is clicked in the div (or span).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜空下最亮的亮点 2024-12-10 17:37:43

最基本的方法是为您的跨度提供一个 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>

Most basic way is to give an id to your span, and then:

<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>

回复收藏 0 原文

↘人皮目录ツ 2024-12-10 17:37:43

如果您使用 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 必须位于标记内，并确保您使用以下方法在您的页面中包含 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>

If you use jQuery then it's simple:

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

Then for the link give it an ID in the HTML:

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

And then:

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

Remember the Javascript must go inside <script></script> tags and also ensure you include jQuery in your page using:

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

If you are new to jQuery then this code below should give you an idea of how to get started. Generally, it's better to refer to elements using IDs instead of their tag name such as textarea and span - It will mean that the javascript will target the right elements.. Something like this will do what you are asking about:

<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>

回复收藏 0 原文

~没有更多了~