Click sharp jquery?

Question

Click sharp jquery?

Navigation

#1 by (6 votes)
#2 by (4 votes)
#3 by (0 votes)

7

Good, I'm blocked to perform an action with jQuery.

I have this:

<div>
  <p>
    Password: <span id="passwordServer">*********</span> 
    <b><i id="togglePasswordServer" class="unhide icon"></i></b>
  </p>
</div>

<script>
  $(document).ready(function(){
    var passwordServer = "123456";
    $("#passwordServer").text(passwordServer);
  });
</script>

Basically what I want to do is the password appear hidden as long as it has not been pressed on the label and I've been investigating and it shows that with the function longclick but it plays with plugin external to < em> jQuery .

The password that is stored in the variable passwordServer would not be seen until the i is kept with id="togglePasswordServer ; if you stop pressing, it returns to show the ***** .

javascript jquery

asked by FuriosoJack 07.06.2017 в 19:51

source

3 answers

6

You can use the events mousedown and mouseup to detect when you click on the element in question and when you remove the mouse from it.

In this case I use a input instead of a span to make it easier.

Example:

$(document).ready(function(){
  $('#password').mousedown(function(){
    $(this).attr("type","text");              
  }).mouseup(function(){
    $(this).attr("type","password");            
  })
});

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

<input id="password" type="password" value="Esto es una contraseña">

answered by 07.06.2017 в 20:12

0

This could help you, luck ...

Example:

<div>
  <p>
    Password: <span id="passwordServer">*********</span>
    <br>
    <b><i id="togglePasswordServer" class="unhide icon" style="cursor: pointer; ">Mostrar Clave</i></b>
    </p>
</div>

$(function(){
    var passwordServer = "123456";

    $('.unhide').mousedown(function(){
        $('#passwordServer').text(passwordServer);
    }).mouseup(function(){
        $('#passwordServer').text('***************');
    }).mouseout(function(){
        $('#passwordServer').text('***************');
    });
});

answered by 07.06.2017 в 21:14

Difference between table variable and temporary table in SQL Server Using std :: less with std :: function

score 4 · Accepted Answer

If I have not understood you wrong, what you intend to do is something like this:

$(document).ready(function(){
  var passwordServer = "123456";
  
  function hide() { 
    $('#passwordServer').text(Array(passwordServer.length + 1).join('*'));
  }
  
  function show() {
    $('#passwordServer').text(passwordServer);
  }
  
  $('#togglePasswordServer')
    .on('mousedown', show)
    .on('mouseup', hide)
    .on('mouseout', hide);
  
  hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>
    Password: <span id="passwordServer"></span>
    <b><i id="togglePasswordServer" class="unhide icon">icon</i></b>
  </p>
</div>