اضافه کردن آیکون چشم مشاهده پسورد در Asp.net Core

نمایش و پنهان کردن پسورد توسط جاوااسکریپت در سینکفیوژن

شما می تونید توسط کد زیر این کار رو انجام بدید. ابتدا از متد Created در textbox استفاده کنید و یک تابع ایجاد کنید :

<form>
   <ejs-textbox ejs-for="Email" placeholder="نام کاربری"></ejs-textbox>
   <ejs-textbox type="password" created="onCreate" placeholder="رمز عبور"></ejs-textbox>
   <button type="submit">ورود</button>
</form>

در کد بالا تابع onCreated رو ایجاد کردیم. حالا در بخش کدهای جاوااسکریپت این تابع رو به صورت زیر بنویسید :

function onCreate() {
    this.addIcon("append", "e-icons e-input-eye");
    document.getElementsByClassName("e-input-eye")[0].addEventListener("click", function (e) {
        let textObj = document.getElementById("Password").ej2_instances[0];
        if (textObj.element.type === "password") {
            textObj.element.type = "text";
        } else {
            textObj.element.type = "password";
        }
    });
}

برای اینکه یه آیکون چشم هم نمایش داده بشه از استایل زیر استفاده کنید :

<style>
    .e-input-eye:before {
        content: '\e345';
        font-family: e-icons;
        font-size: 13px;
    }
</style>

خب الان اگر خروجی کار رو مشاهده کنید چیزی مشابه زیر باید داشته باشید.