2

Auto update div content while typing in textarea using jQuery

 1 year ago
source link: https://www.laravelcode.com/post/auto-update-div-content-while-typing-in-textarea-using-jquery
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Auto update div content while typing in textarea using jQuery

  4859 views

  2 years ago

jQuery

Use the jQuery keyup() method

You can use the jQuery keyup() method in combination with the val() and text() method to simultaneously update the <div> element content, while user writing the text in a <textarea>.

Let's try out the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Auto Update Div with Content from Textarea</title>
<style>
    .output{
        padding: 10px;
        min-height: 50px;
        border: 1px solid #e4e4e4;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("#myTextarea").keyup(function(){
        // Getting the current value of textarea
        var currentText = $(this).val();
        
        // Setting the Div content
        $(".output").text(currentText);
    });
});
</script>
</head>
<body>
    <form>
        <textarea id="myTextarea" rows="5" cols="60" placeholder="Type something here..."></textarea>
    </form>
    <div class="output"></div>
</body>
</html>
Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK