Concentrating on individual text inputs is ineffective in this situation

Question

Concentrating on individual text inputs is ineffective in this situation

Before we proceed, please take a moment to check out this fiddle link: http://jsfiddle.net/asif097/z6zsc

What I am aiming for is to have this jQuery code execute independently for each text input with the specified class. Currently, it is affecting both text input fields simultaneously.

Below is the jQuery code in question:

$(".first-name-input").after("<div class='first-name-input-value'>First Name</div>");

    $(".first-name-input").focus(function(){
        $(".first-name-input-value").hide();
    });

    $(".first-name-input").blur(function(){
        if($(this).val() == ""){
            $(".first-name-input-value").show();
        }

    });

    $(".first-name-input-value").click(function(){
        $(".first-name-input").focus();
    });

I attempted an alternative approach as well: http://jsfiddle.net/z6zsc/1

However, my attempts were unsuccessful. Any suggestions on how to resolve this issue?

Thank you.

jquery html css

Answer 1

Answer №1

It might be beneficial to consider utilizing the HTML5 placeholder attribute for your needs.

http://jsfiddle.net/NWLes/

<input type="text" class="first-name-input" placeholder="First Name" required="required"/>

Alternatively, you could correct your code by visiting: http://jsfiddle.net/vYtmC/

$(".first-name-input").after("<div class='first-name-input-value'>First Name</div>");
    $(".first-name-input").focus(function(){
        $(this).next().hide();
    });
    $(".first-name-input").blur(function(){
        if($(this).val() == ""){
            $(this).next().show();
        }

    });
    $(".first-name-input-value").click(function(){
         $(this).prev().focus();
    });

Answer 2

It might be beneficial to consider utilizing the HTML5 placeholder attribute for your needs.

http://jsfiddle.net/NWLes/

<input type="text" class="first-name-input" placeholder="First Name" required="required"/>

Alternatively, you could correct your code by visiting: http://jsfiddle.net/vYtmC/

$(".first-name-input").after("<div class='first-name-input-value'>First Name</div>");
    $(".first-name-input").focus(function(){
        $(this).next().hide();
    });
    $(".first-name-input").blur(function(){
        if($(this).val() == ""){
            $(this).next().show();
        }

    });
    $(".first-name-input-value").click(function(){
         $(this).prev().focus();
    });

Answer 3

Answer №2

To ensure your event handlers target the specific object that triggered the event, you must refer to $(this).

If you need to interact with a neighboring element, you will have to locate that element in relation to the current this element.

In this case, since the .first-name-input-value object follows the first-name-input object, you can accomplish this using the following code:

$(".first-name-input").focus(function(){
    $(this).next().hide();
});

Just an FYI, if you are looking to implement HTML5 placeholder functionality, there are existing solutions available as pre-written shims. Instead of reinventing the wheel, consider using one of these ready-made options. A quick Google search should yield several choices for you to explore.

Answer 4

To ensure your event handlers target the specific object that triggered the event, you must refer to $(this).

If you need to interact with a neighboring element, you will have to locate that element in relation to the current this element.

In this case, since the .first-name-input-value object follows the first-name-input object, you can accomplish this using the following code:

$(".first-name-input").focus(function(){
    $(this).next().hide();
});

Just an FYI, if you are looking to implement HTML5 placeholder functionality, there are existing solutions available as pre-written shims. Instead of reinventing the wheel, consider using one of these ready-made options. A quick Google search should yield several choices for you to explore.

Answer 5

Answer №3

One way to enhance your input elements is by utilizing inline javascript, which can also be organized into a separate function...

Your modified html code would look something like this:

<input id="first_name" name="first_name" type="text" size="25" placeholder="First Name"
            onfocus="if (this.value == 'First') { this.value = ''; this.style.color = '#000000'; } " 
            onblur="if (this.value == '') { this.value = 'First'; this.style.color = '#909090'; } " 
            value="First"/>

This method will help achieve the desired outcome and can be applied individually to each input field...

For a demonstration, you can view an updated fiddle here- http://jsfiddle.net/z6zsc/8/

Answer 6

One way to enhance your input elements is by utilizing inline javascript, which can also be organized into a separate function...

Your modified html code would look something like this:

<input id="first_name" name="first_name" type="text" size="25" placeholder="First Name"
            onfocus="if (this.value == 'First') { this.value = ''; this.style.color = '#000000'; } " 
            onblur="if (this.value == '') { this.value = 'First'; this.style.color = '#909090'; } " 
            value="First"/>

This method will help achieve the desired outcome and can be applied individually to each input field...

For a demonstration, you can view an updated fiddle here- http://jsfiddle.net/z6zsc/8/

Concentrating on individual text inputs is ineffective in this situation

Answer №1

Answer №2

Answer №3

Similar questions

Any advice on applying jquery CSS to elements contained within a dynamically loaded div element?

Prevent rapid event triggers with a jQuery slider

Is it possible to append an attribute to input descendants of hidden elements using jQuery?

Real-time Property Availability Widget

Tips for utilizing the router instance on a different HTML page within the Backbone JS framework

Could my mental model be flawed? When a page is accessed using https, a relative css path will be invoked using the same protocol

Use JavaScript and PHP to retrieve a value from an array and dynamically populate select options based on that value

Hovering over a white background will darken the CSS styling

Downloading a PDF file on the server is not supported by React

Maintaining responsiveness, CSS grid will automatically adjust the height of each element to be equal

Tabulating with jQuery Arrays

The data type "100%" cannot be assigned to a number type in the kendo-grid-column

The data retrieved through Ajax functions may vary between Chrome and Firefox browsers

Interactive multi-phase form with field populated by jQuery

What are the steps to implementing partial page functionality with the $http service in Angular?

I find the SetInterval loop to be quite perplexing

Inheriting vertical height and alignment (inline-block)

What is more effective: utilizing document fragments or string concatenation for adding HTML to the DOM?

Resolved issue with background image display on Mac Chrome

Exploring the capabilities of jQuery's .post function within a custom template form on Wordpress