Highlighttextarea
How do I make an highlighttextarea?
Highlighttextarea example. What is a highlighttextarea? How do you make a highlighttextarea? This script and codes were developed by El Alemaño on 15 November 2022, Tuesday.
Highlighttextarea - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>highlighttextarea</title> <link rel='stylesheet prefetch' href='http://www.cloud.elalemanyo.de/tmp/jquery.highlighttextarea.min-f0t77QWmxZ.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="textarea-wrapper">
<textarea id="highlighttextarea" cols="50" rows="6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at massa non erat convallis vulputate molestie nec dui. Donec auctor blandit nibh quis luctus. Donec tincidunt auctor consequat.</textarea>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://www.cloud.elalemanyo.de/tmp/jquery.highlighttextarea.min-oeFLiy77Vr.js'></script> <script src="js/index.js"></script>
</body>
</html>
Highlighttextarea - Script Codes CSS Codes
.highlightTextarea .highlightTextarea-highlighter { z-index: 1; pointer-events: none;
}
.highlightTextarea mark { background: rgba(0, 64, 0, 0.2); cursor: pointer; pointer-events: all;
}
Highlighttextarea - Script Codes JS Codes
$(document).ready(function() { $('#highlighttextarea').highlightTextarea({ words: { words: ['Lorem ipsum', 'vulputate'] }, debug: false }); $('.textarea-wrapper').on('click', function(e) { e.preventDefault(); if ($(e.target).is('mark')) { var word = $(e.target).text(); var index = $(e.target).index(); alert('Word "'+ word +'" with index '+ index +' was clicked.'); } else { $('.highlightTextarea .highlightTextarea-highlighter').css('z-index','0'); } });
});
Developer | El Alemaño |
Username | elalemanyo |
Uploaded | November 15, 2022 |
Rating | 3 |
Size | 2,158 Kb |
Views | 30,360 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Sticker | 3,099 Kb |
Dom loading | 3,201 Kb |
Flexslider Playground | 2,565 Kb |
Telefon Ring | 3,749 Kb |
Video Scrolling | 2,178 Kb |
RGB Hover | 2,703 Kb |
Spin | 8,262 Kb |
Now Reading Bubble | 2,254 Kb |
Fluid Width iFrame | 1,606 Kb |
RGB Loading | 3,210 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
SnappySnippet Test | Elmsoftware | 8,385 Kb |
Login-ng-modal | Heedoo | 3,566 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
Fun form with currentColor | Bnthor | 2,713 Kb |
DIV wormhole | Heydon | 1,932 Kb |
FCC Portfolio | Cmwebby | 4,304 Kb |
Scarlett Johansson Tribute Page | Diomed | 3,233 Kb |
Simple DevTools | Deegill | 2,511 Kb |
Draggable directive | YahyaKacem | 2,277 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!