Change text type input to format password

I have an input text type and I want to change the format when I begin to write something in the input to format password.

This is my html:

<div class="px-0 col-5">

    <label class="px-0 col-12 mdc-text-field">



        <input type="text" class="mdc-text-field__input" style="padding-left: 20px;" name="PWDDossier" id="PWDDossier" value="" />

        <span class="mdc-floating-label" style="padding-left: 20px;">Mot de passe</span>

        <div class="mdc-text-field__bottom-line"></div>

        <i class="material-icons">

                                        visibility

                                    </i>

    </label>

    @Html.ValidationMessageFor(m => m.PWDDossier, "", new { @class = "text-danger" })

</div>

edited Nov 16 '18 at 12:13

user3559349

asked Nov 16 '18 at 10:44

mecabpazzo95

246

4

Are you talking about <input type="password"> ??

– Bonish Koirala
Nov 16 '18 at 10:46

it is a password but i don't want to set the type password i want to set type text to avoid the display of autocomplete browser chrome

– mecabpazzo95
Nov 16 '18 at 10:47

2

Why not just use autocomplete="off" attribute on your input?

– Cue
Nov 16 '18 at 10:52

@Cue for this attribute it is not working for this i decided to do another solution

– mecabpazzo95
Nov 16 '18 at 10:55

add a comment |

I have an input text type and I want to change the format when I begin to write something in the input to format password.

This is my html:

<div class="px-0 col-5">

    <label class="px-0 col-12 mdc-text-field">



        <input type="text" class="mdc-text-field__input" style="padding-left: 20px;" name="PWDDossier" id="PWDDossier" value="" />

        <span class="mdc-floating-label" style="padding-left: 20px;">Mot de passe</span>

        <div class="mdc-text-field__bottom-line"></div>

        <i class="material-icons">

                                        visibility

                                    </i>

    </label>

    @Html.ValidationMessageFor(m => m.PWDDossier, "", new { @class = "text-danger" })

</div>

edited Nov 16 '18 at 12:13

user3559349

asked Nov 16 '18 at 10:44

mecabpazzo95

246

4

Are you talking about <input type="password"> ??

– Bonish Koirala
Nov 16 '18 at 10:46

it is a password but i don't want to set the type password i want to set type text to avoid the display of autocomplete browser chrome

– mecabpazzo95
Nov 16 '18 at 10:47

2

Why not just use autocomplete="off" attribute on your input?

– Cue
Nov 16 '18 at 10:52

@Cue for this attribute it is not working for this i decided to do another solution

– mecabpazzo95
Nov 16 '18 at 10:55

add a comment |

I have an input text type and I want to change the format when I begin to write something in the input to format password.

This is my html:

<div class="px-0 col-5">

    <label class="px-0 col-12 mdc-text-field">



        <input type="text" class="mdc-text-field__input" style="padding-left: 20px;" name="PWDDossier" id="PWDDossier" value="" />

        <span class="mdc-floating-label" style="padding-left: 20px;">Mot de passe</span>

        <div class="mdc-text-field__bottom-line"></div>

        <i class="material-icons">

                                        visibility

                                    </i>

    </label>

    @Html.ValidationMessageFor(m => m.PWDDossier, "", new { @class = "text-danger" })

</div>

edited Nov 16 '18 at 12:13

user3559349

asked Nov 16 '18 at 10:44

mecabpazzo95

246

I have an input text type and I want to change the format when I begin to write something in the input to format password.

This is my html:

<div class="px-0 col-5">

    <label class="px-0 col-12 mdc-text-field">



        <input type="text" class="mdc-text-field__input" style="padding-left: 20px;" name="PWDDossier" id="PWDDossier" value="" />

        <span class="mdc-floating-label" style="padding-left: 20px;">Mot de passe</span>

        <div class="mdc-text-field__bottom-line"></div>

        <i class="material-icons">

                                        visibility

                                    </i>

    </label>

    @Html.ValidationMessageFor(m => m.PWDDossier, "", new { @class = "text-danger" })

</div>

<div class="px-0 col-5">

    <label class="px-0 col-12 mdc-text-field">



        <input type="text" class="mdc-text-field__input" style="padding-left: 20px;" name="PWDDossier" id="PWDDossier" value="" />

        <span class="mdc-floating-label" style="padding-left: 20px;">Mot de passe</span>

        <div class="mdc-text-field__bottom-line"></div>

        <i class="material-icons">

                                        visibility

                                    </i>

    </label>

    @Html.ValidationMessageFor(m => m.PWDDossier, "", new { @class = "text-danger" })

</div>

<div class="px-0 col-5">

    <label class="px-0 col-12 mdc-text-field">



        <input type="text" class="mdc-text-field__input" style="padding-left: 20px;" name="PWDDossier" id="PWDDossier" value="" />

        <span class="mdc-floating-label" style="padding-left: 20px;">Mot de passe</span>

        <div class="mdc-text-field__bottom-line"></div>

        <i class="material-icons">

                                        visibility

                                    </i>

    </label>

    @Html.ValidationMessageFor(m => m.PWDDossier, "", new { @class = "text-danger" })

</div>

javascript jquery html

edited Nov 16 '18 at 12:13

user3559349

asked Nov 16 '18 at 10:44

mecabpazzo95

246

edited Nov 16 '18 at 12:13

user3559349

asked Nov 16 '18 at 10:44

mecabpazzo95

246

edited Nov 16 '18 at 12:13

user3559349

edited Nov 16 '18 at 12:13

user3559349

edited Nov 16 '18 at 12:13

user3559349

asked Nov 16 '18 at 10:44

mecabpazzo95

246

asked Nov 16 '18 at 10:44

mecabpazzo95

246

asked Nov 16 '18 at 10:44

mecabpazzo95

246

4

Are you talking about <input type="password"> ??

– Bonish Koirala
Nov 16 '18 at 10:46

it is a password but i don't want to set the type password i want to set type text to avoid the display of autocomplete browser chrome

– mecabpazzo95
Nov 16 '18 at 10:47

2

Why not just use autocomplete="off" attribute on your input?

– Cue
Nov 16 '18 at 10:52

@Cue for this attribute it is not working for this i decided to do another solution

– mecabpazzo95
Nov 16 '18 at 10:55

add a comment |

4

Are you talking about <input type="password"> ??

– Bonish Koirala
Nov 16 '18 at 10:46

it is a password but i don't want to set the type password i want to set type text to avoid the display of autocomplete browser chrome

– mecabpazzo95
Nov 16 '18 at 10:47

2

Why not just use autocomplete="off" attribute on your input?

– Cue
Nov 16 '18 at 10:52

@Cue for this attribute it is not working for this i decided to do another solution

– mecabpazzo95
Nov 16 '18 at 10:55

Are you talking about <input type="password"> ??

– Bonish Koirala
Nov 16 '18 at 10:46

it is a password but i don't want to set the type password i want to set type text to avoid the display of autocomplete browser chrome

– mecabpazzo95
Nov 16 '18 at 10:47

Why not just use autocomplete="off" attribute on your input?

– Cue
Nov 16 '18 at 10:52

@Cue for this attribute it is not working for this i decided to do another solution

– mecabpazzo95
Nov 16 '18 at 10:55

add a comment |

1 Answer
1

active

oldest

votes

This causes the input to be a like a password input (but still text input) when the user enters something into the input.

function make_pw(){

   

   $("#PWDDossier").addClass("pwd");



}

.pwd{

    -webkit-text-security: disc;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="px-0 col-5">

    <label class="px-0 col-12 mdc-text-field">



        <input type="text" class="mdc-text-field__input" style="padding-left: 20px;" name="PWDDossier" id="PWDDossier" value="" onkeydown="make_pw()" />

        <span class="mdc-floating-label" style="padding-left: 20px;">Mot de passe</span>

        <div class="mdc-text-field__bottom-line"></div>

        <i class="material-icons">

                                        visibility

                                    </i>

    </label>

</div>

edited Nov 16 '18 at 11:07

answered Nov 16 '18 at 10:48

Jbadminton

60921031

edit: the input now stays a text input but looks like password input

– Jbadminton
Nov 16 '18 at 10:51

@mecabpazzo95 if you want it cashed as password, the only option is to change the type to password

– Jbadminton
Nov 16 '18 at 11:06

it is working now thank you

– mecabpazzo95
Nov 16 '18 at 11:12

problem that this css attribute dosn't work with IE browser just works for google chrome

– mecabpazzo95
Nov 16 '18 at 12:49

add a comment |

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53336240%2fchange-text-type-input-to-format-password%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

This causes the input to be a like a password input (but still text input) when the user enters something into the input.

function make_pw(){

   

   $("#PWDDossier").addClass("pwd");



}

.pwd{

    -webkit-text-security: disc;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="px-0 col-5">

    <label class="px-0 col-12 mdc-text-field">



        <input type="text" class="mdc-text-field__input" style="padding-left: 20px;" name="PWDDossier" id="PWDDossier" value="" onkeydown="make_pw()" />

        <span class="mdc-floating-label" style="padding-left: 20px;">Mot de passe</span>

        <div class="mdc-text-field__bottom-line"></div>

        <i class="material-icons">

                                        visibility

                                    </i>

    </label>

</div>

edited Nov 16 '18 at 11:07

answered Nov 16 '18 at 10:48

Jbadminton

60921031

edit: the input now stays a text input but looks like password input

– Jbadminton
Nov 16 '18 at 10:51

@mecabpazzo95 if you want it cashed as password, the only option is to change the type to password

– Jbadminton
Nov 16 '18 at 11:06

it is working now thank you

– mecabpazzo95
Nov 16 '18 at 11:12

problem that this css attribute dosn't work with IE browser just works for google chrome

– mecabpazzo95
Nov 16 '18 at 12:49

add a comment |

This causes the input to be a like a password input (but still text input) when the user enters something into the input.

function make_pw(){

   

   $("#PWDDossier").addClass("pwd");



}

.pwd{

    -webkit-text-security: disc;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="px-0 col-5">

    <label class="px-0 col-12 mdc-text-field">



        <input type="text" class="mdc-text-field__input" style="padding-left: 20px;" name="PWDDossier" id="PWDDossier" value="" onkeydown="make_pw()" />

        <span class="mdc-floating-label" style="padding-left: 20px;">Mot de passe</span>

        <div class="mdc-text-field__bottom-line"></div>

        <i class="material-icons">

                                        visibility

                                    </i>

    </label>

</div>

edited Nov 16 '18 at 11:07

answered Nov 16 '18 at 10:48

Jbadminton

60921031

edit: the input now stays a text input but looks like password input

– Jbadminton
Nov 16 '18 at 10:51

@mecabpazzo95 if you want it cashed as password, the only option is to change the type to password

– Jbadminton
Nov 16 '18 at 11:06

it is working now thank you

– mecabpazzo95
Nov 16 '18 at 11:12

problem that this css attribute dosn't work with IE browser just works for google chrome

– mecabpazzo95
Nov 16 '18 at 12:49

add a comment |

This causes the input to be a like a password input (but still text input) when the user enters something into the input.

function make_pw(){

   

   $("#PWDDossier").addClass("pwd");



}

.pwd{

    -webkit-text-security: disc;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="px-0 col-5">

    <label class="px-0 col-12 mdc-text-field">



        <input type="text" class="mdc-text-field__input" style="padding-left: 20px;" name="PWDDossier" id="PWDDossier" value="" onkeydown="make_pw()" />

        <span class="mdc-floating-label" style="padding-left: 20px;">Mot de passe</span>

        <div class="mdc-text-field__bottom-line"></div>

        <i class="material-icons">

                                        visibility

                                    </i>

    </label>

</div>

edited Nov 16 '18 at 11:07

answered Nov 16 '18 at 10:48

Jbadminton

60921031

This causes the input to be a like a password input (but still text input) when the user enters something into the input.

function make_pw(){

   

   $("#PWDDossier").addClass("pwd");



}

.pwd{

    -webkit-text-security: disc;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="px-0 col-5">

    <label class="px-0 col-12 mdc-text-field">



        <input type="text" class="mdc-text-field__input" style="padding-left: 20px;" name="PWDDossier" id="PWDDossier" value="" onkeydown="make_pw()" />

        <span class="mdc-floating-label" style="padding-left: 20px;">Mot de passe</span>

        <div class="mdc-text-field__bottom-line"></div>

        <i class="material-icons">

                                        visibility

                                    </i>

    </label>

</div>

function make_pw(){

   

   $("#PWDDossier").addClass("pwd");



}

.pwd{

    -webkit-text-security: disc;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="px-0 col-5">

    <label class="px-0 col-12 mdc-text-field">



        <input type="text" class="mdc-text-field__input" style="padding-left: 20px;" name="PWDDossier" id="PWDDossier" value="" onkeydown="make_pw()" />

        <span class="mdc-floating-label" style="padding-left: 20px;">Mot de passe</span>

        <div class="mdc-text-field__bottom-line"></div>

        <i class="material-icons">

                                        visibility

                                    </i>

    </label>

</div>

function make_pw(){

   

   $("#PWDDossier").addClass("pwd");



}

.pwd{

    -webkit-text-security: disc;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="px-0 col-5">

    <label class="px-0 col-12 mdc-text-field">



        <input type="text" class="mdc-text-field__input" style="padding-left: 20px;" name="PWDDossier" id="PWDDossier" value="" onkeydown="make_pw()" />

        <span class="mdc-floating-label" style="padding-left: 20px;">Mot de passe</span>

        <div class="mdc-text-field__bottom-line"></div>

        <i class="material-icons">

                                        visibility

                                    </i>

    </label>

</div>

edited Nov 16 '18 at 11:07

answered Nov 16 '18 at 10:48

Jbadminton

60921031

edited Nov 16 '18 at 11:07

answered Nov 16 '18 at 10:48

Jbadminton

60921031

answered Nov 16 '18 at 10:48

Jbadminton

60921031

answered Nov 16 '18 at 10:48

Jbadminton

60921031

edit: the input now stays a text input but looks like password input

– Jbadminton
Nov 16 '18 at 10:51

@mecabpazzo95 if you want it cashed as password, the only option is to change the type to password

– Jbadminton
Nov 16 '18 at 11:06

it is working now thank you

– mecabpazzo95
Nov 16 '18 at 11:12

problem that this css attribute dosn't work with IE browser just works for google chrome

– mecabpazzo95
Nov 16 '18 at 12:49

add a comment |

edit: the input now stays a text input but looks like password input

– Jbadminton
Nov 16 '18 at 10:51

@mecabpazzo95 if you want it cashed as password, the only option is to change the type to password

– Jbadminton
Nov 16 '18 at 11:06

it is working now thank you

– mecabpazzo95
Nov 16 '18 at 11:12

problem that this css attribute dosn't work with IE browser just works for google chrome

– mecabpazzo95
Nov 16 '18 at 12:49

edit: the input now stays a text input but looks like password input

– Jbadminton
Nov 16 '18 at 10:51

@mecabpazzo95 if you want it cashed as password, the only option is to change the type to password

– Jbadminton
Nov 16 '18 at 11:06

it is working now thank you

– mecabpazzo95
Nov 16 '18 at 11:12

problem that this css attribute dosn't work with IE browser just works for google chrome

– mecabpazzo95
Nov 16 '18 at 12:49

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky