技術標籤：jqueryjs

也就是小圓點轉換成視覺化字元，一個比較普遍的需求
一直以來都是用的Bootstrap框架，就想換一種方式
查了一下jquery幫助文件，prop()方法可以實現這一功能
prop(“屬性名”,“屬性值”);
然後用簡單的hide(),show()方法改變下圖示字型
js程式碼如下：

$(document).ready(function () {
        var $x = $(".icon_eyeclose");//繫結閉眼圖示
        var $y = $(".icon_eyeopen");//繫結開眼圖示
        var
 
 $z = $("#inp");//繫結輸入框
        $y.hide();//隱藏開眼圖示
        $x.click(function () {
            $x.hide();
            $y.show();
            $z.prop("type", "text");
        });
        $y.click(function () {
            $y.hide();
            $x.show();
            $z.prop(
 
"type", "password");
        })
    })

這樣就實現了這一功能，然後再將樣式稍加修改
去下輸入框的自帶邊框，加cursor：pointer讓滑鼠移入眼睛後變小手
效果圖如下：