如何修改 input type

首先我们来做一个html页面，来模拟这个密码框，这个图标找的不好，就用小箭头代替小眼睛了。

js怎么修改input的type属性ie不出错

js怎么修改input的type属性ie不出错

那么怎么实现点击小眼睛显示明文密码呢？小编的思路是改变input的type类型，默认是password类型，点击小眼睛变为text类型，反之亦然。

js怎么修改input的type属性ie不出错

js怎么修改input的type属性ie不出错

一般的思路就是这样，但是ie8会出现错误，提示type类型不可以改变，这该怎么办呢？

js怎么修改input的type属性ie不出错

这时候我们可以换个思路，既然改变不了他type类型，那么不妨改变这个input框，在点击小眼睛的时候换掉input不就行了吗？再点击的时候再换回来，记得保存input的value值。

js怎么修改input的type属性ie不出错

还有一种方法也可以，直接写两个input框，一个text类型，一个password类型，点击小眼睛的时候显示不同的输入框就行了，也是记得保存value值。

js怎么修改input的type属性ie不出错

<template>

<view class="mis-flex mis-flex-j-l mis-mg-t-b-30 mis-pd-b-30 mis-flex-row">

<text class="mis-uc-name iconfont icon-password mis-mg-t-10"></text>

<input class="mis-uc-border mis-mg-t-05" v-model="usr_pwd" :type="seen ? type_text : type_password" placeholder="请设置新密码"清粗 />唯蚂

<text v-show="seen" @click="changeSeen" class="icon iconfont icon-open-your-eyes"></text>

<text v-show="!seen"  @click="changeSeen" class="icon iconfont icon-close-your-eyes"指正埋></text>

</view>

</template>

<script>

data(){

return{

//显示隐藏密码

usr_pwd: "",

seen: false,

type_text: "text",

type_password: "password",

}

},

methods:{

changeSeen(){

this.seen = !this.seen

},

}

</script>

---