Display a crimson undulating line beneath select words within the input field

I'm currently working on a component in React that involves using an input field to type query syntax, similar to (A=2 and B="Value2"). My goal is to highlight errors by displaying a red wavy line below objects that are incorrect, without affecting the entire query.

So far, I've tried the following methods:

  • I initially used a div with transparent text color, positioned below the input field. I mapped the errors in this div and displayed the wavy line. This method worked well within a fixed width limit, but once the input value exceeded the width of the field and became scrollable, the div did not scroll along with it.

  • Another approach I attempted was using a contentEditableDiv to manipulate innerHTML, but this caused some complications with other necessary components.

The first method would be ideal if I could figure out a way to make the div scroll in sync with the input value. Despite my efforts, I haven't been able to find a suitable solution for this yet.

If anyone has any suggestions or a better approach to achieve this, I would greatly appreciate the help!

Thank you in advance!

javascriptcssreactjstypescriptinput

Answer №1

To create an interesting effect, consider styling the text within a div with transparent color. Use a span with a class named wavy to underline specific words and apply the following CSS:

text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;

If you position the transparent div to overlap an input element using absolute positioning, ensure it has the same width as the input and consider making it scrollable with overflow: auto.

Alternatively, if input or textarea elements are not necessary, you could use a styled div with contentEditable="true". For a visual example, check out this sample on stackblitz: https://stackblitz.com/edit/js-jaz62k?file=index.html

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the row height of a datatable in JSF 2.0

I'm struggling to change the row height of my JSF datatable. Here's what I have: <h:dataTable value="#{myBean.myValue}" rowClasses="dt_row" var="o"> </h:dataTable> I've defined a css class called dt_ ...

cssjsf

What causes the CSS width property to vary when using the display:inline property?

There is a piece of code that contains a <ul> element with the default css property display:block. Here is the code snippet: ul,li{ list-style-type:none; padding:0; /*display:inline;*/ } #parent{ width:100%; /*height:50px;*/ background-color ...

htmlcsshtml-listsdisplay

Leveraging ajax to interact with php files

I'm attempting to utilize a PHP function for SQL operations. From my research on Stack Overflow, it seems that this can be achieved using AJAX. So I proceeded with the implementation. Below is the AJAX code snippet: $.ajax({ url: './put_in_ta ...

javascriptphpjquerymysqlajax

React- hiding div with hover effect not functioning as expected

I'm having trouble using the :hover feature in CSS to control the display of one div when hovering over another, it's not functioning as expected. I've successfully implemented this on other elements, but can't seem to get it right in t ...

javascripthtmlcssreactjs

The rationale behind making arrays const in Typescript

Currently, I am utilizing VS Code along with TSLint. In one instance, TSLint recommended that I change the declaration of an array variable from let to const, providing this code snippet: let pages = []; "Identifier 'pages' is never reassign ...

typescripttslint

Is there a method in JavaScript or jQuery that can be used to detect changes in the width of a div element while debugging HTML

Is there a method to detect changes in the width of a div element when debugging HTML using JavaScript or jQuery? I am experiencing a situation where a div's size is being altered by some CSS rules, but I am unable to identify the source even when ana ...

javascripthtmljqueryeventsdom-events

Synchronous AJAX calls can cause the browser to become unresponsive

I am facing an issue with my jQuery Ajax requests as they need to be synchronous, causing the browser to freeze until a response is received. The main problem I encounter is that I need to display a spinning icon while waiting for the response, but the fre ...

javascriptjqueryajaxbrowsersynchronous

angular8StylePreprocessorSettings

I'm currently trying to implement the approach found on this tutorial in order to import scss files through stylePreprocessorOptions in Angular 8. However, I'm encountering an error stating that the file cannot be found. Any suggestions on how to ...

javascriptangulartypescriptangular-cli

Disregard IDs when linting CSS in ATOM

Is there a way to configure csslint in Atom to exclude "ids" and prevent the warning "Don't use IDs in selectors" from appearing? Update: Despite my question being flagged as potentially duplicate, I delved deeper in my own research and ultimately fo ...

csshtmlatom-editorcsslint

Having trouble incorporating a class with if and else statements, the code isn't functioning as expected

I am attempting to apply a class with an if-else statement, but for some reason it is not progressing past the if condition and reaching the else block. $('.headings aside').click(function() { if ($(this).children('span').hasClass( ...

javascriptjqueryif-statement

JQuery button.click() handler executes without a user click

Currently, I am in the process of tidying up the code for my auction game. However, I have encountered an issue where my function is triggered immediately after endAuction() is called rather than waiting for the button click event. Unfortunately, I am no ...

javascriptjqueryclick

A guide on simulating childprocess.exec in TypeScript

export function executeCommandPromise(file: string, command: string) { return new Promise((resolve, reject) => { exec(command, { cwd: `${file}` }, (error: ExecException | null, stdout: string, stderr: string) => { if (error) { con ...

node.jstypescriptjestjs

Retrieving MAC Address from Client's Device

Question: How can I get the MAC and the IP address of a connected client in PHP? Can the MAC address of a client browsing my site be retrieved? Is it possible with JavaScript, jQuery, or PHP? I attempted to use JavaScript with the following code: a ...

phpjavascriptjquery

Show/Hide RowContent component using Material-UI

Is there a solution for expanding the TableRow component in order to display additional fields within another div? Attempting to add divs within the table body results in a warning from React. warning: validateDOMNesting(...): <div> cannot appear as ...

reactjstablerowmaterial-ui

What is the process for removing a document with the 'where' function in Angular Fire?

var doc = this.afs.collection('/documents', ref => ref.where('docID', '==', docID)); After successfully retrieving the document requested by the user with the code above, I am unsure of how to proceed with deleting that do ...

angulartypescriptfirebasegoogle-cloud-firestoreangularfire

Steps for creating a retractable `<ul>` list on click away

I have successfully implemented a <ul> drop-down list, but I am interested in making the list "retract" or disappear back to its original state when clicking away from it. Is this possible? Check out this FIDDLE The code snippet below is what I cur ...

javascriptjqueryhtmlcss

Angular 5 routing is reporting that the queryParams list is currently empty

Having just started with Angular, I've encountered an issue that I can't seem to solve. When passing parameters to the router (using the Router class), the list of parameters on the target site is empty. let navigationExtras: NavigationExtras ={ ...

angulartypescriptrouteroptional-parametersangular-activatedroute

Unlock the potential of HTML5 Datalist: A comprehensive guide on integrating it with

The latest version of HTML, HTML5, has introduced a new tag called datalist. This tag, when connected to <input list="datalistID">, allows for autocomplete functionality on web forms. Now the question arises - what is the most efficient approach to ...

javascriptphpmysqlhtmlhtml-datalist

"Looking to disable the browser shortcut for ctrl-N and instead trigger a function when this key combination is pressed? Check out the JS Fiddle example provided below

I recently incorporated the library shortcut.js from In my project, I attempted to execute a function when CTRL + N is pressed. The function executed as expected; however, since CTRL + N is a browser shortcut for opening a new window in Mozilla 8, it also ...

javascriptjquerybrowser

Executing Multiple Ajax Requests Concurrently with Single Callback in jQuery

I am experimenting with ways to improve page loading speed by breaking up all the database calls into separate scripts and executing them simultaneously using ajax. After doing some research, I discovered that jQuery's $.when().then() function could h ...

javascriptphpjqueryajaxjquery-deferred