1

I'm trying to get the value of a password input box on window.onload however it keeps returning an empty string. If I set a break point and step through my code then it returns the correct string. And if i set a breakpoint anywhere before it and then just continue running the code it will also work. But running it without a break point somewhere stopping the code at some point or even using the longest setTimeout() doesnt seem to work.

A little background: im writing a solution to rid my design of the chrome autocomplete yellow background. I found a great solution that works but it removes the password value Solution Link. So i decided to first get the password value and then reset it once everything finishes. Heres my code:

window.onload = function() {
  setTimeout(function() {
    var documentForms = document.forms;

    //First cycle through all the forms
    for (var i = 0; i < documentForms.length; i++) {
      var password = null;

      // Now find the password and store its value
      for (var k = 0; k < documentForms[i].elements.length; k++) {
        var passwordInput = documentForms[i].elements[k];
        if (passwordInput.type == "password") {
          password = passwordInput.value; //This keeps returning ""
        }
      }

      // Now using this solution remove the autocomplete yellow: 
      for (var j = 0; j < documentForms[i].elements.length; j++) {
        var input = documentForms[i].elements[j];
        if (input.type == "text" || input.type == "password" || input.type == null) {
          var text = input.value;
          input.focus();
          var event = document.createEvent('TextEvent');
          event.initTextEvent('textInput', true, true, window, 'a');
          input.dispatchEvent(event);
          input.value = text;
          input.blur();
        }

        // Now that it has removed the password, if this is the password input, reset its value correctly
        if (input.type == "password") {
          input.value = password;
          input.blur();
        }
      }

    }
  }, 300);
};
<form method="post" class="login">

  <input type="text" class="input-text" name="username" id="username" value="" placeholder="Email Address" />

  <input class="input-text" type="password" name="password" id="password" placeholder="Password" />

  <input type="submit" class="button" name="login" value="Start" />

  <a href="/forgot-password">Forgotten password?</a>

</form>
Community
  • 1
  • 1
Dustin Silk
  • 3,316
  • 4
  • 27
  • 39
  • 1
    Can we see your HTML? – ED-209 Apr 30 '15 at 09:41
  • wait, what's your problem again? – Kaiido Apr 30 '15 at 09:45
  • Originally its removing the yellow autocomplete fill from chromes inputs. (A long standing issue for everyone). Thats solved. What Im asking for help with is that when i try get the password inputs value it returns an empty string. It should return the text – Dustin Silk Apr 30 '15 at 09:46
  • Then , can you show your html, because I can't repro here – Kaiido Apr 30 '15 at 09:49
  • @Kaiido see my edit to the question – Dustin Silk Apr 30 '15 at 09:55
  • Dustin Silk, but where is 'value' attribute at password input? – Viktor Kireev Apr 30 '15 at 10:02
  • @victor Its set through autocomplete. Going to guess that chrome doesnt allow you to get autocomplete passwords. but it will let me get it in the console. or after a break point. so unsure. – Dustin Silk Apr 30 '15 at 10:03
  • why would you want to be able to store in clear your users stored passwords? IMO it's a security feature, and a good one. – Kaiido Apr 30 '15 at 10:07
  • @Kaiido I was hoping it would be possible to stop that pesky yellow background that chrome adds to inputs with autocomplete on while keeping the autocomplete functionality. its easy to change the color. but cant find a way to make it transparent. a few hacks got close. – Dustin Silk Apr 30 '15 at 10:10
  • From memory, I'll post an answer if I find a source, accessing the value of a password input field is forbidden by the HTML specification; as a security feature. – Nick Breen Apr 30 '15 at 10:12
  • @NickBreen, still it is possible in FF… seems odd. @DustinSilk, I think you can't have a transparent background, the only hack that does work for me is the `box-shadow` one, from [this answer](http://stackoverflow.com/a/14205994/3702797) that you might already have seen. – Kaiido Apr 30 '15 at 10:25
  • @DustinSilk, you should edit your post with this specific question ("change color of autofilled input to transparent in chrome") – Kaiido Apr 30 '15 at 10:28
  • Ignore my previous comment, one can trivially access the value of a password field. I was thinking of the prohibition of writing the value of a file field. – Nick Breen Apr 30 '15 at 10:29

2 Answers2

4

Chrome pretends it does not have a value for the field as a security measure. There's no way to hack around that.

You can change the styling as per answers to this question: Google Chrome form autofill and its yellow background

Community
  • 1
  • 1
Blaise
  • 11,664
  • 8
  • 59
  • 89
  • Ah that sucks. thanks. I'll have to figure something else out and just work with chrome instead of trying to fight it. I looked through all of those. I know of the hack using box-shadow to change the background color. Unfortunately its not possible to change the text color also, so you're stuck with light coloured backgrounds with black text. Also none of those solutions worked to make the background transparent. – Dustin Silk Apr 30 '15 at 10:36
  • Have you tried `input:-webkit-autofill { color: pink !important; }` ? – Blaise Apr 30 '15 at 10:38
  • @DustinSilk you could try `text-shadow: 1px 1px 1px #FFF;` not really readable on too small font-size but on big enough ones, it looks like bas-relief effect – Kaiido Apr 30 '15 at 11:24
-1

Try this:

var getPasswordValue = function getPasswordValue(inputEl){
    inputEl.type = "text";
    var value = inputEl.value;
    inputEl.type = "password";
    return value;
};
Haugen
  • 11
  • 3