I am wondering if it is possible to apply styling to content in a textarea as a user inputs text.
For instance:
<textarea>abcdefghijklmnopqrstuvwxyz</textarea>
Is there a way to highlight all the vowels in the textarea string above using javascript without altering the actual string sent when the form is submitted?
Instead of using a textarea, consider utilizing a div with the contentEditable attribute for text highlighting.
For more information, check out this resource: https://developer.mozilla.org/en-US/docs/HTML/Content_Editable
If you need to submit the highlighted text, remember to transfer it from the div to a hidden form field.
give it a shot
<div contenteditable="true">
Users can modify this content.
</div>
Assign an id to a textarea element and connect its onkeyup event with a jQuery function. Here's an example:
$('#id_of_textarea').bind('keyup', function() {
// Display vowels on the screen
var str = $('#id_of_textarea').val();
var totalFindVowels = "";
for (var i = 0; i < str.length; i++) {
if (str.charAt(i).match(/[a-zA-Z]/) != null) {
// Find vowels
if (str.charAt(i).match(/[aeiouAEIOU]/)) {
totalFindVowels = totalFindVowels + str.charAt(i);
}
}
// Use a label to display all vowels
$("#some_lbl").text(totalFindVowels);
} // for
});
If you're looking for some inspiration, check out these questions that focus on live syntax highlighting. While they may not be exactly what you're looking for, they are close enough to get you started. Syntax highlighting is a common issue, so there are plenty of ready solutions available:
When it comes to being exact and addressing your specific question: There isn't a direct method to accomplish that, but as mentioned by others, there are alternative approaches to tackle the problem
This is the snippet I frequently use:
$( "#inputField" ).on( "keyup input paste", updateContent );
Inside my updateContent function, I utilize jQuery's $( "#inputField" ).val() to retrieve and manipulate the content.
In my angular2 project, I created a form with the following code: import {Component, ElementRef, ViewChild, AfterViewInit} from "angular2/core"; import {Observable} from "rxjs/Rx"; import {ControlGroup, Control, Validators, FormBuilder} from "angular2/com ...
I am experiencing an issue with the JavaScript code I have. Here's my code: <script type="text/javascript"><!-- $(function () { $('#add').click(function() { $(this).before($('select:eq(0)').clone()); ...
Is there a way to access cells from different sheets within a Google spreadsheet? Currently, I am able to access a range of cells from the default first sheet using the following code: var url = 'https://docs.google.com/spreadsheets/d/' + spread ...
I am working with an array of objects (arr) where each object consists of 3 properties (Department, Categories, ProductTypes). The values for these properties are a mix of upper and lower case. To perform a comparison between arr and a search filter (alrea ...
My Angular App is wrapped by electron and utilizes node.js to fetch MySQL data for AngularJs via electron. However, since there is no fixed database in my project, I have to dynamically change the database credentials from the client side, making sure it p ...
angular version: AngularJS v1.3.6 http://github.com/angular-ui/ui-select : Version: 0.8.3 var p1 = { name: 'Ramesh', email: '[email protected]', age: 99 }; $scope.people = [ { name: 'Amalie', ...
I'm currently working on a project using react and MaterialUI to create a list with filter functionality. The list will be populated with data from an Http request and may contain a large number of items. I was researching pagination in the MaterialUI ...
I have successfully created a side NavBar using Bootstrap 5, but I'm facing an issue where my text is getting hidden behind the navbar. Any suggestions on how I can resolve this? Below is the code for my side Navbar: const Navbar = ({ handleClick, is ...
I'm facing a challenge in retrieving the value of a product from a database based on user selection in a <select> element and displaying this value using AJAX in another element. When I directly access precio.php?q=PRODUCTO%201, it returns the d ...
How can I detect if a user closes my dialog modal box using the 'X' button in the upper-right corner of the titlebar? I've been struggling to find a solution while using jQuery's Dialog UI plugin. Here is what I have tried so far: $(&a ...
Currently, I am working on implementing a first person movement feature using the mouse. While I have successfully implemented it using the keyboard, I am facing challenges with the mouse input. The issue arises from the ambiguity in movement directions ca ...
I'm facing an issue with the alignment of images on my website. The images are currently displayed from the top, but I would like them to be aligned in the middle vertically. However, using the 'vertical-align: middle' property on the images ...
I am working on developing a Login application with a landing page using React Router and Redux. In order to have a Sidebar that is always present in all the components within the application, I have setup the Sidebar component as a route that is constantl ...
I'm having trouble figuring out what's causing the issue, so I wasn't sure how to title it. Any help in looking at the code would be greatly appreciated. Here is the problem: https://i.sstatic.net/b73CA.jpg The HR tag should be positioned ...
Is there a way to disable the click event for deleting hours with the 'X' symbol based on a condition? Thank you in advance. <table navigatable class="<some_class>"> <tbody> <tr *ngFor="let item of ...
https://i.sstatic.net/OsDsg.png Hey there everyone, I'm curious if it's achievable to create borders like these using only CSS, without relying on a set image. If anyone has insight on how this can be accomplished, please share your knowledge. ...
I have been attempting to implement multi-select questions in Vue using v-for. The Select menu and its options are populated via JSON data. Unfortunately, I am facing difficulty in retrieving the selected results as expected. Whenever I select an option ...
How can I show the current temperature on a webpage? My setup involves using a Raspberry Pi 3 with the Jessie OS and Chromium as the browser. To achieve this, I have placed a Python script inside a loop for a countdown timer. The script is triggered ever ...
Seeking a method to maintain the same Google Map instance throughout my entire app, as each map load incurs charges... Currently utilizing google-map-react. An instance of a new Map is created in ComponentDidMount, suggesting that it's important to k ...
I'm facing an issue with my setup where there is a crash occurring on the v-for construct of the table-component. The error message displayed is: "Property or method "tablesList" is not defined on the instance but referenced during render". Strangely, ...