the hint and saved password overlap on the login page

Question

I am doing web development in Yii framework and PHP. I am writing a login page. On this page, there are two forms. I used the attributeLabels() function to set the labels for these two forms. One is User Name. One is Password. We can call this kind of labels as hints or placeholder text.

After I logged in my system on safari and clicked the button of "saving password", then the system stored my user name and password. The hint and the saved password overlapped when I came to the login page again.

I have no idea how to fix this bug. I searched the Internet but did not find any useful suggestions.

Thank you in advance.

public function attributeLabels()
{
    return array(
            'userName' => 'Player/User Name',
            'password' => 'Password',
    );
}

Answer 1

I am not familiar with this particular framework, but it sounds like you mean the placeholder text that displays in the password field, and the saved password dots or stars that appear when your browser inputs the password for you are overlapping.

This will happen when you are using javascript to place and remove the placeholder text, usually done for browser compatibility with the standard placeholder attribute. it is probably being triggered on focus or key press in that field, but since the browser doesn't trigger those events when its placing your password in the field it does not remove the placeholder text.

Changing this to a trigger that repeatedly checks that there is something in the value attribute, or something like that will make sure that it will remove that text when there is a value to the field.