jQuery on focus on blur with an array

Question

** This is not a duplication of any IE9 Placeholder issues. The reason being, the old JSP framework I use which is WebWork doesnt support placeholders in the HTML. **

What I want to do

I want to show a value in the field as placeholder text. But if the user starts typing, the placeholder text should disappear.

Problem

If I type something and click outside, what I typed gets replaced with the placeholder text. I want to stop it from being replaced. If the input is empty, show the placeholder text, if the input has a value, don't replace the text.

Restriction

I also cant use placeholder attribute for some technical reasons. (old framework and needs to support IE9).

Hope you guys can help.

var inputTextIDs = [
    [".hotelLocaiton", "Location"],
    ["#agentTransfersSearchForm_filter_transfersName", "Location2"]
];

$.each(inputTextIDs, function(i, v) {
    //$('input'+inputTextIDs[i][0]).val(inputTextIDs[i][1]);
    $('input' + inputTextIDs[i][0]).on('change', function() {
        var inputValue = $.trim($('input' + inputTextIDs[i][0]).val());
        $('input' + inputTextIDs[i][0]).val(inputTextIDs[i][1]);
        $('input' + inputTextIDs[i][0]).on('focus', function() {
            $('input' + inputTextIDs[i][0]).val('');
        }).on('blur', function() {
            $('input' + inputTextIDs[i][0]).val(inputTextIDs[i][1]);
        });
    });
});

I don't think we can't stop from replacing placeholder while typing !! — Jack jdeoel
– Jack jdeoel, Commented Jul 18, 2017 at 7:23
Also: stackoverflow.com/questions/15020826/… and many others. — fdomn-m
– fdomn-m, Commented Jul 18, 2017 at 8:37
@freedomn-m No its not a duplication. I cannot use that placeholder plugin becuase im using WebWork, an old JSP framework and this has plugin complications. — nasty
– nasty, Commented Jul 18, 2017 at 23:29

Yogen Darji · Accepted Answer · 2017-07-18 07:24:20Z

1

var inputTextIDs = [
  [".hotelLocaiton", "Location"],
  ["#agentTransfersSearchForm_filter_transfersName", "Location2"]

];

$.each(inputTextIDs, function(i, v) {

  $('input' + inputTextIDs[i][0]).on('focus', function() {
    if ($('input' + inputTextIDs[i][0]).val() == inputTextIDs[i][1]) {
      $('input' + inputTextIDs[i][0]).val('');
    }
  }).on('blur', function() {
    if (!$('input' + inputTextIDs[i][0]).val()) {
      $('input' + inputTextIDs[i][0]).val(inputTextIDs[i][1]);
    }
  });


  $('input' + inputTextIDs[i][0]).val(inputTextIDs[i][1]);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="hotelLocaiton" />
<input id="agentTransfersSearchForm_filter_transfersName" />

edited Jul 18, 2017 at 7:24

answered Jul 18, 2017 at 7:06

Yogen Darji

3,31018 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Yogen Darji Over a year ago

@nasty What exactly you need to achieve?

nasty Over a year ago

I want to show the placeholder in the field but if you type something it deosnt replace what you have written with the placeholder

Yogen Darji Over a year ago

@nasty So Initial input field will be with placeholder and then if you write something it will remove placeholder value and so on, correct?

Yogen Darji Over a year ago

Let us continue this discussion in chat.

Milan Chheda · Accepted Answer · 2017-07-18 12:02:11Z

1

You can use focusin and focusout:

var inputTextIDs = [
  [".hotelLocaiton", "Location"],
  ["#agentTransfersSearchForm_filter_transfersName", "Location2"]
];

$.each(inputTextIDs, function(i, v) {
  $(v[0]).val(v[1]).focusin(function() {
    if ($(this).val() == v[1]) {
      $(this).val('');
    }
  }).focusout(function() {
    if ($(this).val() == '') {
      $(this).val(v[1]);
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="hotelLocaiton" />
<input id="agentTransfersSearchForm_filter_transfersName" />

edited Jul 18, 2017 at 12:02

answered Jul 18, 2017 at 7:21

Milan Chheda

8,2593 gold badges23 silver badges35 bronze badges

3 Comments

nasty Over a year ago

This still clears the text when I click into the input field after typing my message. So, 1) Type something in, Then click inside the input field. This should clear the input field

nasty Over a year ago

Thanks heaps. This is amazing. But for password fields, this shows *** instead of the text "Password".. Is it possible to fix at all?

Milan Chheda Over a year ago

Well, if type is password, its not possible. Yes, some effort and lines-of-codes can be written to tweak and make it work somehow but only if its really worth. Else, I would recommend not to, as it might not support all browsers.

Bharatsing Parmar · Accepted Answer · 2017-07-19 12:49:15Z

1

You can try this as exactly you want and it also working for password field.

var inputTextIDs = [
  [".hotelLocaiton", "Location"],
  ["#agentTransfersSearchForm_filter_transfersName", "Location2"]

];

$.each(inputTextIDs, function(i, v) {
  var placeholderValue = inputTextIDs[i][1];
  $('input' + inputTextIDs[i][0]).val(placeholderValue);
  
  if($('input' + inputTextIDs[i][0]).attr("type")=="password"){
    $('input' + inputTextIDs[i][0]).attr("original-type","password");
    $('input' + inputTextIDs[i][0]).attr("type","text");
  }
  
  $('input' + inputTextIDs[i][0]).on('change', function() {      
    if ($(this).val().trim() == "") {
      $(this).val(placeholderValue);
      
      if($(this).attr("type")=="password"){
        $(this).attr("type","text");
      }
    }
    else{
       if($(this).attr("original-type")=="password"){
        $(this).attr("type","password");
      }
    }
  });

  $('input' + inputTextIDs[i][0]).on('focus', function() {
    if ($(this).val().trim() == placeholderValue) {
      $(this).val('');
      
      if($(this).attr("original-type")=="password"){
        $(this).attr("type","password");
      }
    }   
  }).on('blur', function() {
    if ($(this).val().trim() == "") {
      $(this).val(placeholderValue);
      
      if($(this).attr("type")=="password"){
        $(this).attr("type","text");
      }
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="hotelLocaiton" />
<input id="agentTransfersSearchForm_filter_transfersName" type="password" />

edited Jul 19, 2017 at 12:49

answered Jul 18, 2017 at 7:35

Bharatsing Parmar

2,4551 gold badge11 silver badges18 bronze badges

4 Comments

nasty Over a year ago

Thanks heaps. This is amazing. But for password fields, this shows *** instead of the text "Password".. Is it possible to fix at all?

Bharatsing Parmar Over a year ago

I have updated answer to make it work for password as well.

nasty Over a year ago

Thanks. But when I click on the password input field, it changes its type to text. Then when I click outside it turns to password again

Bharatsing Parmar Over a year ago

You can codesnippet again. When you click on password input field it will stay as password field. when click outside it check for value if value exists other than placeholder then it will stay as password type otherwise it will change to text type. you can check this screencast.com/t/Kc2nkdvv

Collectives™ on Stack Overflow

jQuery on focus on blur with an array

3 Answers 3

4 Comments

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related