Issue with Text Box design

A text box on a web page is used to modify the IP address. After editing the content in the text box, its style changes to resemble a second box. How can the style be changed back to that of the original text box? JavaScript is being used on the client side and the web client is Internet Explorer 7.

Below is the code snippet in an ASP page that creates the text box:

<td style="height: 27px"><input type="text" id="txtIpAddressHost" name="txtIpAddressHost" value="" onchange="ValidateParameter(this);" onkeydown="this.style.backgroundColor='white'" disabled="disabled" maxlength="15" /></td>

The HTML before and after the changes are shown below:

Before Keypress

<input type="text" onkeydown="this.style.backgroundColor='white'" onchange="Validate(this);" maxlength="10" value="-30.000000" name="txtCoolSetPointCkt1" id="txtCoolSetPointCkt1">

After Keypress

<input type="text" onkeydown="this.style.backgroundColor='white'" onchange="Validate(this);" maxlength="10" value="-30.000000" name="txtCoolSetPointCkt1"id="txtCoolSetPointCkt1" style="background-color: white;">

CSS change

css change
{
    background-color: white;
}

Answer №1

To achieve this effect with CSS 2, you can use only CSS. Let's say the textbox has a class called ip-box.

input.ip-box { border:1px solid #333; }
//and when the input box is focused, apply the same rule
input.ip-box:focus { border:1px solid #333; }

However, IE7 does not support this pseudo-class. In that case, you can utilize JavaScript like this:

<input type="text" value="10.0.0.88" onfocus="javascript:this.style.border='1px solid #333' "/>

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

Unable to dispatch actions within the mounted lifecycle hook in Vuex?

Can anyone explain why the json data I fetch with axios is not populating my state.pages as expected? Interestingly, when I make a change to the file and vite reloads, the data appears on the page. However, it disappears again upon refreshing the browser. ...

Working with repeated fields in Google protobuf in JavaScript

Consider this scenario: you have a google protobuf message called Customer with a repeated field as shown below. message Customer { repeated int32 items = 1; } What is the procedure for setting the repeated items field in javascript? ...

Begin the process of setting up PDF.js on the website

I've been attempting to incorporate PDF.js into my website, but I'm struggling to do it correctly. When I try to display the PDF file on the screen, I encounter this issue: https://i.sstatic.net/aixrP.png Although I can't see the PDF file ...

The Node.js express seems to be unable to fetch the css and js files

Sharing my main.ts file in which I am facing issues with linking my css and js files. view image import express from 'express'; import {Request,Response} from 'express'; import expressSession from 'express-session'; import pat ...

Combining Multiple 3D JSON Objects in JavaScript [or jQuery]

Looking to combine multiple JSON objects into one? I have a code snippet that you can use! Here is the code: http://jsfiddle.net/5Uz27/ The issue with this code is that it only merges objects on the first level, causing deeper levels to be overwritten. T ...

Adding information into sqlite from a json document

There seems to be an issue here, I'm unable to make an insertion: $.getJSON('file.json', function(data) { tx.executeSql("INSERT INTO table (DATE, LIB, BID) VALUES("+data.date+","+data.Lib+","+data.BID+")"); }); ...

Tips for Keeping a Responsive Image at the Forefront of a Text-Image Layout as You Scroll

I'm currently in the process of creating a website where text appears on the left side with an accompanying image on the right. The challenge I'm encountering is ensuring that as users scroll, the image adjusts dynamically based on the associated ...

try out testing with the mock declaration in Jasmine test

My service involves loading a variable from a JavaScript file fetched from a CDN (without a typedef). To handle this, I have created a declaration for the variable: declare const externalValue: string; @Injectable() export class Service { ... Everythi ...

Is there a specific requirement for importing a React component into a particular file?

I am facing an issue with my component and two JavaScript files: index.js and App.js. When I import the component into index.js, it displays correctly on the screen. However, when I import it into App.js, nothing appears on the screen. Here is the code fr ...

unable to record the input value in jquery

Snippet for HTML code: <div id="Background"> <input id="search-Bar" type="text"> <button id="SearchButton">Search</button> </div> var name = $("#search-Bar").val(); $("#SearchButton").on("click", function() { co ...

Switch out the Angular panel with a simple click event

I have developed an angular application using bootstrap. You can view the app on this plunker link <div class="panel col-lg-3 col-md-3 col-sm-2"> <div class="" id="menu"> <div ng-controller="mylistcontroller" cl ...

Angular 4 applications do not come with TinyMCE embedded

I've been attempting to integrate the tinyMCE editor into an angular4 application, but unfortunately I encountered an error that reads: tinyMCE is not defined. https://i.stack.imgur.com/qMb5K.png I have been following the guidance provided by tin ...

The click function for the responsive navbar hamburger is not functioning properly

Having some trouble with the code not working in responsive mode. I've tested it on a 600px screen and the hamburger button doesn't seem to work (I click it and nothing happens). I've gone through both the CSS and JS multiple times but can&a ...

Increase the size of a centered image within a table

Lately, I've felt like my mind is starting to unravel. Here's the issue at hand: I've been attempting to resize an image within a table cell so that it spans the full width of the cell. Strangely enough, this seems to be harder than anticip ...

What is the best way to pass variables to a function in an Angular

How can I pass the variables year and monthGet to a function in an Angular service from a controller? Service myApp.factory('getJsonForCalendarService', function($resource, year, monthGet) { return $resource( '../rest/ ...

What is the method for displaying a div adjacent to a password input field?

I am attempting to display a password verification box next to an input field. The current logic is functioning properly, but the box containing all password requirements is not appearing in the correct position. Instead of being positioned adjacent to the ...

Is there a way for ASP.NET MVC to automatically notify when a record is edited or updated?

Having recently used the NotifyIcon class in a windows application, I found it to be quite useful. As someone who primarily works as a web developer, I am curious if there is something similar available for websites. The website that I am working on inclu ...

Styling for the DataTable disappears upon loading jQuery

my PHP file named "zero3data.php" <?php printf('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">'); printf('<thead>'); printf('<tr>'); ...

Creating Dynamic Divs in ASP.NET

Attempting to dynamically create a Div by clicking a button has been a challenge for me. I found a helpful link here: After referring to the link, I created the following code on the server side (.cs page): public static int i = 0; protected void Bu ...

Accessing data in form rules with Vuetify: tips and tricks

Is it possible to access a data element within a rule? Click here to see my code in action I'm attempting to change the value of a data element on a text field rule within a Vuetify form. While the rule itself is functioning properly, I'm enco ...