パスワードの表示非表示を切り替えるjQueryプラグイン

harada 682views 更新:2014年2月27日

jQuery Show Password Pluginを使います。

CSS

<style>
.forms {
    position: relative;
}
.show-password-link {
    display: block;
    position: absolute;
    z-index: 11;
}
.password-showing {
    position: absolute;
    z-index: 10;
}
</style>

ソース

<form action="#">
  <div class="forms">
    <div>
      <label for="password">パスワード</label>
      <input type="password" name="password" id="password" class="password" />
    </div>
  </div>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.showPassword.min.js"></script>
<script>
$(document).ready(function() {
  $(':password').showPassword({
    linkRightOffset: 5,
    linkTopOffset: 1
  });
});
</script>

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません