The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML input, show or hide input
bgman
post Nov 13 2018, 05:00 PM
Post #1





Group: Members
Posts: 1
Joined: 13-November 18
Member No.: 26,746



I have a form used to collect info from a web site user in this manner:
<label>What is your mother's maiden name? <input id = "txtMaiden" name = "txtMaiden" type = "text" value = "" size="25" maxlength = "25" /></label><br />

I would like to have the text be visible, just as typed by the user, when the user is in that field. But when the user selects the next field on my form, I would like the field to show only asterisks or spaces as if it were a password. The text should only be visible when it is being entered or modified.

Is this possible?

Thanks in advance for any insight or suggestions!!

Bob.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 14 2018, 06:47 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



You might use javascript onblur and onfocus to change its TYPE atribute value between "text" to "password":

CODE
<input type="text" onblur="this.type='password';" onfocus="this.type='text';">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
aresourcepool
post Jan 14 2019, 08:38 AM
Post #3





Group: Members
Posts: 4
Joined: 14-January 19
Member No.: 26,796



This can be solved using the following JQuery:
<label for="add_fields_placeholder">Placeholder: </label>
<select name="add_fields_placeholder" id="add_fields_placeholder">
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="Other">Other</option>
</select>
<div id="add_fields_placeholderValue">
Price:<input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValueInput">
</div>

<script>
$(document).ready(function(){
$("#add_fields_placeholder").change(function(){
if($(this).val() == "Other") {
$("#add_fields_placeholderValue").show();
}
else {
$("#add_fields_placeholderValue").hide();
}
});
});
</script>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 04:27 AM