Is there a way to strike through only the first word in an input box of type text, without editing the html? I've tried using css text-decoration: line-through; but it's striking both words. Any suggestions on how to achieve this using javascript and css only would be greatly appreciated.
.text-blot { text-decoration: line-through; }<input type='text' value='two words' class='text-blot'>When working with the value attribute of an input element in JavaScript, it can be a bit challenging to apply styles to different parts of the input value. However, there is a creative solution that involves splitting the value into two words and styling them separately.
By using JavaScript to split the string into an array of words, you can then use CSS to apply strike-through to the first word with text-decoration: line-through, and keep the second word unaffected with text-decoration: none.
While this approach may not be ideal for production environments, it is possible to achieve the desired effect by creating two span elements to display each word individually. By setting the original input value's text color to transparent and positioning the span elements accordingly, you can create the visual appearance of strike-through on the first word and plain text on the second word within the input field.
const textBlot = document.querySelector(".text-blot");
const demo = document.querySelector(".demo");
const word1 = document.createElement("span");
const word2 = document.createElement("span");
word1.setAttribute("class", "strike");
word2.setAttribute("class", "no-strike");
demo.appendChild(word1);
demo.appendChild(word2);
const arr = textBlot.value.split(" "); // create an array of words
word1.innerHTML = arr[0];
word2.innerHTML = " " + arr[1];.text-blot {
/* text-decoration: line-through; */
z-index: 1;
color: transparent;
}
.strike {
text-decoration: line-through;
}
.no-strike {
text-decoration: none;
}
.demo span {
position: relative;
left: -9.5rem;
z-index: 99;
}<div class="demo">
<input type='text' value='two words' class='text-blot'>
</div>My goal is to manipulate the height of the div #target when a specific event is triggered, either by reducing/increasing its height from the top or by hiding/showing its content. However, I'm struggling to find a solution to achieve this. The current ...
This question has been closed. It requires additional details for debugging. Answer submissions are currently not accepted. ...
Currently, I am faced with a challenge involving two external Javascript files that are responsible for managing animations and vector triangulation for a background animation. In a typical html/css/js project, adding these two .js files would involve incl ...
I've been delving into TypeScript decorators focusing on properties, and I crafted the following snippet inspired by various examples: decorator.ts export function logProperty(target: any, key: string) { let val = this[key]; const getter = () ...
While working on a web application, we encountered caching issues with Internet Explorer (caching occurred due to the use of GET requests). The problem was resolved when users turned on "Always refresh from server" in IE's Developers Tool. Although we ...
Currently, I am attempting to extract the CSS and JS code of an image reveal animation that is part of a static HTML page: https://i.stack.imgur.com/bnmaO.gif The challenge lies in the fact that the desired effect is one among many showcased image animat ...
It seems like there should be a straightforward solution to my question, but I'm struggling with it. I have an animation.js file that includes dependency_1.js and dependency_2.js in an include folder. Within my animation.js file, I load these dependen ...
Currently, I am working on implementing a slider that can dynamically adjust a specific value in the canvas, such as the radius of a circle. Although my code works as intended, I would like the canvas to update in real-time as I move the slider instead of ...
Today I delved into the world of CSS grid and instantly saw its potential in creating stunning layouts. However, one aspect that has me perplexed is how to adapt the grid for mobile devices. Below is an example that functions perfectly on a desktop screen ...
Front end development const [clientList, setClientList] = useState([]); //store all data from the database in a list //make an axios request to retrieve data from the database useEffect(() => { Axios.get("http://localhost:3001/clients&quo ...
I'm currently facing an issue with rendering a HTML template as a PDF using EJS. Despite my efforts, the images are not displaying properly. Here is how my project is structured: - public - images image.jpg - routes documentsRoute.js ...
In my React project, there is a directory containing several images, and I am attempting to import them all into a carousel using Bootstrap. The current code looks like this: import Carousel from 'react-bootstrap/Carousel'; const slideImagesFold ...
My goal is to access each node by elementName using the following JavaScript code: function myFunction() { var h1 = document.getElementsByName("demoNode"); for (var i = 0; i < h1.length; i++) { if (h1[i].name == "demoNode") { var att ...
Our website features a fixed header and footer with scrollable content. We have 20 text boxes on the page, but the ones at the bottom, like Zip and Telephone, are obscured by the iOS virtual keyboard that appears when a text box is clicked. If we could d ...
Can you help me with a task involving text inputs and links? <p><input type="text" name="color[]" value="orange" /> <a href="#" class="show-color">color</a><br /> <input type="text" name="color[]" value="purple" /> < ...
I have a React component that I'm working on: function DivModal() { const [isOpen, setIsOpen] = useState(true) return ( <div> <button onClick={() => setIsOpen(prev => !prev)} className={buttonStyle}>Open</button> ...
I am facing a challenge with my Angular (v. 1.6.3) app where I have fetched a JSON object containing stock price data. The structure of the JSON object only allows querying using brackets, with each key being a string that may include spaces, parentheses, ...
I've encountered a similar issue as discussed on SO, but I'm struggling to resolve the problem detailed below. The scenario This code snippet found at the following link is functional: https://codesandbox.io/s/frosty-water-118xp?file=/src/App. ...
I am looking to display thumbnails in a row, but they are currently showing up in a single column. I have tried correcting the row class in the HTML template provided, but it is not displaying as desired. Here is how it looks like now {% extends "ba ...
My application revolves around a webpage created with the use of node and angular. On the root URL (/), I have incorporated a signup and login form without the use of Angular. Upon successful login, Angular scripts and configuration files are loaded on the ...