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, Jul 18 '17 at 07:23
Possible duplicate of [Placeholder in IE9](https://stackoverflow.com/questions/6366021/placeholder-in-ie9) — freedomn-m, Jul 18 '17 at 08:37
Also: https://stackoverflow.com/questions/15020826/how-to-support-placeholder-attribute-in-ie8-and-9 and many others. — freedomn-m, Jul 18 '17 at 08: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, Jul 18 '17 at 23:29
Maybe not, but the linked questions have over 10 code based solutions that are almost identical to the answers given here. — freedomn-m, Jul 19 '17 at 07:40

Yogen Darji · Answer 1 · 2017-07-18T07:24:20.437

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 '17 at 07:24

answered Jul 18 '17 at 07:06

Yogen Darji

3,230
16
31

@nasty What exactly you need to achieve? – Yogen Darji Jul 18 '17 at 07:11
I want to show the placeholder in the field but if you type something it deosnt replace what you have written with the placeholder – nasty Jul 18 '17 at 07:13
@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 Jul 18 '17 at 07:14
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/149446/discussion-between-yogen-darji-and-nasty). – Yogen Darji Jul 18 '17 at 07:28

Milan Chheda · Answer 2 · 2017-07-18T12:02:11.260

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 '17 at 12:02

answered Jul 18 '17 at 07:21

Milan Chheda

8,159
3
20
35

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 Jul 18 '17 at 07:25
Thanks heaps. This is amazing. But for password fields, this shows *** instead of the text "Password".. Is it possible to fix at all? – nasty Jul 19 '17 at 00:43
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. – Milan Chheda Jul 19 '17 at 06:16

Bharatsing Parmar · Answer 3 · 2017-07-19T12:49:15.017

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" />

Thanks heaps. This is amazing. But for password fields, this shows *** instead of the text "Password".. Is it possible to fix at all? — nasty, Jul 19 '17 at 00:43
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 — nasty, Jul 20 '17 at 00:03
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 https://www.screencast.com/t/Kc2nkdvv — Bharatsing Parmar, Jul 20 '17 at 04:55

jQuery on focus on blur with an array

3 Answers3