Alter the color of textbox text using JavaScript

I have a text input field. When clicked, I want to change the text color style using JavaScript. Previously, I successfully achieved clearing the inner content of the textbox when clicked and reverting to the default version on blur. This code is currently functioning as intended.

<input id="username" type="text" name="username"    value="Enter Username..." onfocus="if(this.value=='Enter Username...') {this.value='';}  onblur="if(this.value==''){this.value='Enter Username...'}"/>

However, now I also want to change the text color and border size of the textbox when it is focused. The current code is not producing the desired effect.

<input id="username" type="text" name="username" value="Enter Username..." onfocus="if(this.value=='Enter Username...') {this.value=''; document.getElementById('username').style.color = 'blue';}"  onblur="if(this.value==''){this.value='Enter Username...'; document.getElementById('username').style.color = '#fff'; }"/>
javascripthtmlcsstextbox

Answer №1

To enhance user experience, consider using quotas for color selection:

<input id="kullanici_adi_text" type="text"
   name="kullanici_adi_text"
   value="Enter Username..." 
onfocus="if(this.value=='Enter Username...')
    {this.value='';
     this.style.color = 'blue';}"  
onblur="if(this.value=='')
    {this.value='Enter Username...';
     this.style.color = '#ff0000';}"/>

Also, it is advisable to separate Javascript code from HTML markup for better organization.

Answer №2

This code can definitely get the job done:

<input id="username_input" type="text" onfocus="changeTextColor()">

<script>
function changeTextColor() {
document.getElementById("username_input").style.color = "#ff0000";
document.getElementById("username_input").style.color = "magenta";
document.getElementById("username_input").style.color = "blue";
document.getElementById("username_input").style.color = "lightblue";
}
</script>

Answer №3

1. Be sure to add the jQuery library to your webpage.

2. Insert the following code snippet:

$(document).ready(function(){
   $('#username_input').focus(function(){
       $(this).css('background-color', 'yellow');
   }).focusout(function(){
       $(this).css('background-color', 'white');
   });
});

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

Find the JavaScript code that selects the previous value chosen

When working with a select in React, I am facing an issue where the console.log is returning the last value selected instead of the current one. For instance, if I select 4 followed by 3 and then 5, the code will display 1 (default value), then 4, and fin ...

javascriptreactjs

Offering fields for modules, main, and browser that meet the needs of ESM, CommonJS, and bundlers

I have upgraded a number of my published npm packages to include both commonjs and esm builds. Some of these packages are meant for use in both node and the browser, and they are all compiled using webpack or rollup. Additionally, all of them are written i ...

javascriptnode.jsnpmwebpackrollup

How can I utilize the "remark" tool to handle Markdown files with URLs that don't adhere to Markdown formatting? Are there any supplemental plugins available for this

My markdown file has frontmatter and sometimes includes inline URLs that are not properly formatted with markdown syntax. I'm looking for a way to handle these non-markdown URLs within the markdown file - possibly by parsing them into HTML URLs using ...

javascriptnext.jsmarkdownremarkjs

Is bundling a Node.js backend a wise decision or a mistake?

Just a thought that crossed my mind - I understand the advantages of bundling client-side code, but what about bundling server-side code with Browserify/Webpack? Is this considered a best practice? ...

javascripttypescriptwebpackbrowserify

Retrieving Data from an Unnamed HTML Table using Selenium

I'm currently exploring ways to extract the output generated by this website: mailtester.com upon inputting a complete email. Let's take the email address [email protected] for demonstration. Once this address is entered and submission is ma ...

htmlseleniumxpath

JavaScript code for validating two passwords is malfunctioning

I'm currently working on a registration form for my website and I'm trying to implement a JS script that compares two password inputs (password and repeat password) and displays a message saying "passwords are not the same." Below is the code I h ...

javascripthtmlbootstrap-4

Using jQuery to strip inline styling from copied webpage content

When I copy content/paragraph from Wikipedia and try to paste it as code on my webpage dynamically, it ends up with a lot of inline styles. I want the code to be clean and properly formatted in HTML. I have tried several methods, but they remove all the ta ...

javascriptjqueryangularjs

Is there a way to trigger a Javascript alert and then navigate to a different page in Django once the user presses 'ok'?

On my Django website, I have a contact form that triggers when the submit button is clicked. I want to display a Javascript alert notifying the user that their message has been sent and then redirect them back to the homepage. While I have successfully i ...

javascriptpythondjango

Ways to access a field value in SAPUI5

As I delve into OPENUI5/SAPUI5, I'm faced with the task of accessing data for the controls I've implemented. For instance: <Label text="Amount" /> <Input id="inputAmount" value="{Amount}" /> <Text id="lblCurrency" text="USD" > ...

javascripthtmlmodelsapui5

Managing the React Router component as a variable

I'm currently working on integrating React-Router into an existing React app. Is there a way to use react-router to dynamically display components based on certain conditions? var displayComponent; if(this.state.displayEventComponent){ {/* ...

javascriptreactjsreact-router

A guide to mastering the art of descending using three distinct class types

My script is functioning properly for a single class, but it fails to work for multiple classes with the same purpose. I attempted to transfer from div (#panel) to class (.panel) as I am using several classes. However, this adjustment did not resolve the i ...

jqueryhtmlcss

Arrange documents according to the final two characters

My method for collecting files from a folder involves using some Smarty code: {assign var=files value="uploads/Documenten/GPS-Tracks/*.html"|glob} {if count($files)} <ul> {foreach from=$files item='file'} {assign v ...

phphtmlsmarty3

In the Bootstrap Grid system, all posts are aligned to the left side

I have created a gallery with Bootstrap in React.js. The posts are currently displayed using the bootstrap grid system, however, all posts appear on the left side and I am struggling to center them. Any ideas on how to achieve this? After applying justify ...

htmlcssreactjsbootstrap-4

How can we show a varying number of textfields based on user selection using hooks and updating values dynamically through onChange events?

Currently, I am in the process of setting up a form that includes a Material UI select field ranging from 1 to 50. My challenge is how to dynamically display multiple textfields for "First Name and Last Name" using Hooks each time the user selects a number ...

javascriptreactjsmaterial-uireact-hooks

Is placing JavaScript on the lowest layer the best approach?

I'm facing a unique situation that I haven't encountered before and am unsure of how to address it. My website has a fixed top header and footer. On the left side, there is a Google Adsense ad in JavaScript. When scrolling down, the top header s ...

javascripthtmlc#-4.0asp.net-mvc-4adsense

I find myself unable to write any code using my Visual Studio Code

I'm facing an issue where I can't write any code on my Visual Studio Code. Despite following all the recommendations on the official website, I haven't been able to resolve the problem. More information here Here are the changes I have tri ...

pythonhtmllinuxubuntuvisual-studio-code

Exploring object manipulation and generating unique identifiers by combining values - a beginner's guide

After analyzing the provided data, my goal is to come up with a method of combining the IDs and returning an array of their corresponding keys. // example data var data = [ { id: 1, key: 'a' }, { id: 1, key: 'b' }, { id: 2, key ...

javascriptnode.jsobjectreduce

Is Python a suitable programming language for developing applications on a Raspberry Pi device?

I'm diving into the coding world for the first time and I have a project in mind - controlling my RC car with my smartphone using a Raspberry Pi 3. Research suggests that I should use Node.JS and JavaScript to create the app, but I'm wondering if ...

javascriptpythonnode.jsraspberry-pi3

How to Display Element in Vue.js when Window.print is Triggered?

I'm wondering if it's possible to show a different message when a user tries to print my page. I currently have a 'Pay Now' button that isn't visible in the print preview. I'd like to display a text saying 'Visit www.exam ...

javascriptvue.jsprinting

Tips for capturing a jQuery trigger in traditional JavaScript

I am trying to trigger an event using jQuery and I want to bind to it in a non-jQuery script. It appears that while I can bind to the event in jQuery using on, I am unable to do so with addEventListener. Check out this jsFiddle for a demonstration: http: ...

javascriptjqueryaddeventlistener