Can I create an input element that looks like the one in my screenshot?
I want to be able to change the value with JavaScript and highlight text by wrapping it with '*' and giving it a different color.
Thank you for any assistance.
Can I create an input element that looks like the one in my screenshot?
I want to be able to change the value with JavaScript and highlight text by wrapping it with '*' and giving it a different color.
Thank you for any assistance.
It's not possible to achieve this using an input element. Here is an alternative method you can try:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
/*stylize it to resemble an input element*/
[contenteditable] {
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="contentDiv" contenteditable>sdfsdtokendfdfsdfs</div>
<br/>
<input type="button" onclick="test()" value="Click me"/>
<script type="text/javascript">
function test() {
// define the token
var valueToSelect = "tokendfdf";
var contentDiv = document.getElementById('contentDiv');
if (contentDiv.innerHTML.indexOf(valueToSelect) >= 0) {
// create a span with specified color
var replaceString = '<span style="color: red">*' + valueToSelect + '*</span>';
// replace the matched string with colored span
contentDiv.innerHTML = contentDiv.innerHTML.replace(valueToSelect, replaceString);
}
}
</script>
</body>
</html>
Take a look at this JS Bin example for reference.
I'm struggling with a code that is not calculating the total sum properly within an inner foreach loop <script> const opSelect = document.querySelectorAll('.op .qltbox'); opSelect.forEach(op => { const inputElement = op.quer ...
Recently, I was tasked with taking over a partially-developed Django application. Python is familiar territory for me, but I am completely new to JavaScript. This application heavily relies on jQuery for various form manipulations. One specific issue I enc ...
My current setup is similar to a lightbox feature, but I'm facing an issue where the script waits for the entire webpage to load before running. Is there a way to ensure that my script runs first without waiting for the webpage to fully load? CSS: # ...
My current project involves an ionic application that performs calculations based on user inputs. Once the calculations are complete, the results are converted into a PDF using the generatePDF API call. Additionally, there is a requirement to email the gen ...
function generateRandomNumberBetween(start, stop) { var low = Math.ceil(low); var high = Math.floor(high); return Math.floor(Math.random() * (high - low + 1)) + min; } function testRandomNumberGeneration() { var start = parseInt(prompt("Enter low ...
Having a bit of an issue with positioning/resizing UL lists. I have <li> tags with varying heights but the same width. I want to adjust their position so there is no blank space between them when resizing the window, ensuring they are always close t ...
Here's a puzzling situation - I've entered the word Hello. into a <textarea>, and while I can see it on my screen, it doesn't show up between the opening and closing <textarea> tags. It may seem like a simple issue, but I'v ...
How can I modify Emmet autocomplete to change from className="" to className={styles.}? If it is possible, could you please guide me on how to achieve this? Alternatively, if modifying the autocomplete feature is not an option, is there a way to create a ...
I'm working on a component that contains three different Typography components. I need to align "summary" to the left, while 'miles' and 'duration' should be aligned to the right. https://i.stack.imgur.com/7e9sY.png Here's t ...
Hey there, I'm currently facing an issue with sending fields from a form saved in a JavaScript object to a PHP server. I have set up the AJAX communication, but when I try to access the object in PHP, I notice that the length is showing as 0 during de ...
Currently facing an issue with a web request on my website. I suspect the problem lies in not properly closing the response. Is there a method to track the number of open connections I have with the server I am attempting to communicate with? ...
Are you wondering how to generate a barcode with Crystal Reports in ASP.NET? ...
Check out the object I have: obj = { "FirstName": "Fawad", "LastName": "Surosh", "Education": {"University": "ABC", "Year": "2012"} } Take a look at my node.js script: var nodeName = 'Education.Year'; obj.nodeName; // ...
I encountered a peculiar problem while using a CSS theme with jQuery. After applying a custom CSS theme to a webpage, everything looked fine. However, when I performed certain operations using jQuery - like checking checkboxes causing others to be checked ...
I am facing a challenge with configuring my SMTP account to use the send email function in ASP.Net Identity. The web.config used to do this previously, but now ASP.Net Identity is requesting Email Services. How can I integrate SMTP or Office 365 email into ...
Having an issue that I need help with: My header includes a menu, news sliding with flexslider, and a search input: The problem occurs when I resize the browser manually or reload it with a smaller width; the right element jumps down, causing a pushdown ...
My value is a string: "['Eitaj', 'Jason Json', 'Eitaj M', "Jason Json's"]" Trying to parse it with JSON.parse() results in an error. Encountered SyntaxError: Unexpected token ' in JSON at position 1 I discovere ...
I'm currently utilizing next-translate. The default recognition of my routes is as follows: /about <--- /de/about /es/about However, I would like to set a specific locale for all paths: /en/about <--- /de/about /es/about Below is ...
I have a table with a lot of ordering details. However, when I try to add a product from the admin page, the original table structure works fine. But as soon as jQuery adds an extra DIV to expand the table, I encounter issues. Can anyone suggest a jQuery m ...
Having trouble with a C# Windows form that includes a web browser control navigating to a URL and then unexpectedly opening the last visited URL in the default system browser (like Chrome) even after closing and disposing of the form and control. Upon inve ...