When the user clicks on the login text field or password field, any existing text will

Currently, I am working on the login section of my website and I would like to implement a similar effect to Twitter's login form, where the Username and Password values disappear when the Textfield and Password field are in focus. I have attempted to achieve this using plain JavaScript with the following code...

function PasswordClick(evt) {

    if ("Password" === this.value) this.value = "";
if(this.getAttribute('type')=='text')
        {
                this.setAttribute('type','password');
        }
        this.focus();
}

However, I have encountered issues with this approach in Chrome 12.0.742.100 on Windows and other web-kit browsers, although it seems to work fine on Firefox.

Does anyone have a more effective solution for implementing this feature?

Thank you in advance.

javascriptjqueryhtmlcss

Answer №1

One option is to utilize the placeholder attribute which is supported by modern browsers, and pair it with a JQuery placeholder script to ensure compatibility with older browsers as well.

If you're looking for more information on this topic, check out the responses to a similar question on Stack Overflow that includes a link to a simple yet effective placeholder script:

https://github.com/marcgg/Simple-Placeholder

Answer №3

If you’re looking for a solution, this code snippet might just be the one you need. Make sure to insert the following code into the HEAD section of your webpage:

function initialize() {
    document.getElementById('password').type = 'text';
}
window.onload = initialize;

function focusOn(item) {
    if (item.value == 'Password') {
        item.value = '';
        item.type = 'password';
        item.style.color = '';
    }
}

function blurOff(item) {
    if(item.value == '') {
        item.value = 'Password';
        item.type = 'text';
        item.style.color = '#C0C0C0';
    }
}

Next, wherever you envision the password input field to appear, include this block of HTML:

<input id='password' name='password' type='password' onfocus="focusOn(this);" onblur="blurOff(this);" value="Password" style="color:#C0C0C0" />

Answer №4

When it comes to finding the perfect solution, there are numerous options available. But in my opinion, the most user-friendly and visually appealing option is the jQuery plugin found at:

This plugin also incorporates some fantastic effects that really enhance the overall experience.

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

Having trouble with Simplehtmldom's innertext function?

While working with simple_html_dom: I encountered the following code snippet: $j = ' <itemBody> <div>films - to watch (Simple Present)<br/> <textEntryInteraction responseIdentifier="RESPONSE_1"/> ...

phphtmlxmldomsimple-html-dom

I am having trouble importing Material UI icons. Can anyone guide me on how to successfully use Material UI icons without any

While working on my project with React and Material UI, I encountered some difficulties when trying to import the material icons. I followed the code examples from the Material UI documentation, using version "material-ui": "^1.0.0-beta.41" and "material-u ...

javascriptreactjsmaterial-ui

Unhook, add at the beginning, and set requirements jQuery

There are two clickable div elements that can switch classes when clicked. If the first one contains "1", it will be given a class of "active". If the second one contains "2", it will have the class "active" while removing the class from the first one. &l ...

javascriptjqueryhtmlcss

Updating a slider based on the values of two other sliders can be achieved by implementing a

I am working on a project that involves three input sliders. I need the third slider to display the product of the values from the first two sliders. Additionally, I want the value of the third slider to update dynamically whenever the values of the first ...

javascripthtmlangularjsslider

Optimal method to refresh v-for when updating route in Vue.js seamlessly without having to manually reload the page

What is the best approach to re-render a v-for loop in my Vue.js application when switching to another route? In my scenario, I am using Vuex, vuex-persistedstate, and moment for saving data in localStorage and displaying timestamps like "a moment ago". ...

javascriptvue.js

What is the best way to link multiple select tags in an HTML document?

I am working with a data grid that contains student information such as Name, Class, and Score. Each row has a checkbox for selection. The requirement is that when the user selects one or more rows and clicks on the "show information" Button, a new windo ...

htmlangulartypescript

Containing more than a full page of information, the footer stays fixed at the bottom of the screen, even as the user scrolls to

As I work on developing my artist website to showcase my music, I have encountered an issue with the footer placement. My goal is seemingly simple - I want a footer that always sits at the bottom of the site, just under the content/body section. There shou ...

htmlcsswordpresswebfooter

My code to hide the popup when clicking outside doesn't seem to be working. Can you help me figure out why?

After searching around on stackoverflow, I stumbled upon a solution that worked for me: jQuery(document).mouseup(function (e){ var container = jQuery(".quick-info"); if (container.has(e.target).length === 0) { container.hide(); } }); ...

javascriptjqueryjquery-selectors

The request to check the API at http://localhost/v5/api/checker returned a 404 error, indicating that

Trying to create a function that uses AJAX to call PHP, but encountering an error when clicking the button. Does anyone know how to solve this issue? Code provided below. PHP: $app->get('/checker', function () { $jsonContents = file_get_ ...

javascriptphpajaxslim

What is the process for displaying images fetched from the API?

Currently, my front-end is built using React/Redux and the API side with AdonisJS. All of my images are stored within the API, and I need to find a way to display them on the front-end. Can anyone provide guidance on accomplishing this task? ...

javascriptnode.jsimagereact-redux

transfer the output from the second selection to the adjacent div

I am utilizing a library called select2 specifically for single choice scenarios. My goal is to transfer the selected option to a different div once it has been chosen. Here is the code I have so far: https://jsfiddle.net/hxe7wr65/ Is there a way to ach ...

javascriptjqueryhtmlcssjquery-select2

The dropdown in vue-multiselect automatically closes after the first selection is made, ensuring a smooth user experience. However,

I am experiencing an issue where the dropdown closes after the first selection, despite setting close-on-select="false". However, it works properly after the initial select. You can observe this behavior directly on the homepage at the following link: vue ...

javascriptvue.jsvuejs2vue-multiselect

Combining two-digit values

As a newcomer to JavaScript, I've been working on creating a basic calculator to practice my skills. However, I've run into an issue. When entering a double-digit number, the calculator is adding the digits together instead of treating them as se ...

javascriptvariables

When utilizing CKEDITOR, the default TEXTAREA is obscured, and CKEDITOR does not appear

I am trying to incorporate CKEDITOR into my project. I have added the ckeditor script in the footer and replaced all instances of it. <script src="<?= site_url('theme/black/assets/plugins/ckeditor/ckeditor.min.js') ?>" type="text/javasc ...

javascriptjqueryhtmlcssckeditor

Transmit information using JSON format in Angular 8 using FormData

i am struggling with sending data to the server in a specific format: { "name":"kianoush", "userName":"kia9372", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcd7d5ddd8ce85...@example.com</a>" } H ...

javascriptangulartypescript

Using Javascript, verify if a given URL is legitimate and commences with "http://" or "https://"

I need to validate the authenticity of my URLs, ensuring they begin with either http:// or https://. Here is the regular expression (RegExp) I have been using: private testIfValidURL(str) { const pattern = new RegExp('^(https?:\\/&bsol ...

javascriptregex

What steps should be taken in VUEjs if the API response is null?

There's a method in my code that retrieves a token from an API: let { Token } = await API.getToken({ postId: postId }) if(){} Whenever the token is null, I receive a warning in the console saying "Cannot read property 'Token' ...

javascriptvue.jsecmascript-6vuejs2vue-component

Custom Pug design without any CSS files added

I am having trouble with my .pug template in my express project as it is not including its stylesheets. I have referred to the pug documentation but still can't figure out the issue. Any help would be appreciated! FILE TREE: views `-- index.pug `-- ...

cssexpresspug

Utilizing AJAX to transmit information to the database through a query

I have a form on my HTML page that I want to send to a PHP page using AJAX. It looks like the AJAX part is working, as I can see that it reacts when the button is clicked. However, the PHP page is not receiving the form content because nothing seems to be ...

phphtmlajax

How can an Angular Component be created in the browser using the standard method?

Attempting to develop a basic Angular example using JS/ESM. It has been some time since working within the angular environment, and there appear to be two primary choices: Utilizing the UMD lib (preferably to be avoided) Using the ESM2015 folder and loadi ...

javascriptangularecmascript-nextes6-modules