How can I make jQuery script that shows symbol (*) instead of a letter when typing text in input. Value of text input shouldn't change, only the visible text.
Input type password is not an option, because I would like to make that it could be possible to see original text again with a click of a button. Also, password input is autocompleted in Google Chrome and in this situation I don't want it to be autocompleted.
You should use a password field, set autocomplete="false" and toggle between text/password for the field
document.getElementById("fooVisible").addEventListener("change", function() {
if (this.checked) {
return document.getElementById("foo").setAttribute("type", "text");
}
document.getElementById("foo").setAttribute("type", "password");
})
<input type="password" id="foo" autocomplete="false" />
Show: <input type="checkbox" id="fooVisible" />
You could store the value in a variable and replace all characters with the asterisk. This does not handle delete or backspace, but this should get you in the right direction if that's the way you want to go.
$(document).ready(function(){
var textValue = "";
$('.asteriskInput').keypress(function(e){
var textLength = $(this).length;
textValue += e.key;
$(this).val($(this).val().replace(/[A-Za-z]/g,'*'));
});
$('#changeInputView').on('click',function(){
$('.asteriskInput').val(textValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="asteriskInput" type="text" /><br />
<button id="changeInputView">Show characters</button>
Related
I have created an on-screen keyboard in HTML using <div> and <a> tags. On the page there are six text inputs (firstName, nickname, lastName, notes, allergies, mobileNumber). I'm not that great at JS but I do know how to do it if there is just one input on the page but I'm not sure how to do it when there are multiple. Part of what I'm struggling with is the input box loses focus as soon as I click on a letter.
How do I append the letter to the selected input and not lose focus on that input? This is what I use to append a letter to one input when it is the only input on the page:
var setClickEvents = function () {
$('.keyboard a.digit').unbind('click').click(function () {
$name = $("input[id$='tbSearchBox']");
$name.val($name.val() + $(this).html());
});
}
HTML keyboard button--just one letter but it is the same style/setup for all letters and numbers:
q
You can save the reference to the focused input in some global variable.
And use it to set the focus back in text-appending function
<html>
<body>
<script>
var selectedInputId;
function clickBtn(key) {
if (selectedInputId != null) {
selectedInputId.value = selectedInputId.value + key.innerHTML;
selectedInputId.focus();
}
}
</script>
q
<input type="text" id="id1" onfocus="javascript:{selectedInputId=this;}" />
<input type="text" id="id2" onfocus="javascript:{selectedInputId=this;}" />
<input type="text" id="id3" onfocus="javascript:{selectedInputId=this;}" />
<input type="text" id="id4" onfocus="javascript:{selectedInputId=this;}" />
</body>
</html>
I search a script to disappear the value in an input field.
A user click into and the value disappear and if the user doesn't write something into the input field it should be appear the text again.
I try it with jQuery and focusin() focusout() but then I change the value from all input field.
I bet you are looking for the mechanism that HTML5 attribute placeholder provides, just use it this way:
<input type="text" placeholder="This value will disappear" name="somename" value="" />
As for multiline placeholder for textarea, check this method:
https://stackoverflow.com/a/25261886/1477938
You can use placeholder for this or else you can use value as placeholder. Just check it out
Placeholder based Value
jQuery(document).ready(function(){
jQuery("input[type='text']").each(function(){
var x = jQuery(this).attr("value");
jQuery(this).focus(function(){
if($(this).val()==x)
{
$(this).val('');
}
});
jQuery(this).blur(function(){
if($(this).val()=="")
{
$(this).val(x);
}
});
});
});
Using placeholder
<input type="text" placeholder="test">
You can use placeholder property.
$(document).ready(function() {
$('#input').focus(
function() {
if (!$(this).val().length || $(this).val() == $(this).data('placeholder')) {
$(this).val('');
}
}
);
$('#input').blur(
function() {
if (!$(this).val().length) {
$(this).val($(this).data('placeholder'));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Text here" />
<br/>
<hr/>
<b>ALTERNATIVE (jQuery):</b>
<br/>
<input type="text" id="input" data-placeholder="Text here" value="Text here" />
I have an input text field with a placeholder attribute. The placeholder disappears when I enter text, but I would like the the placeholder text to reappear after I click the button, "clear," or when the text field is empty. What are some ways I can achieve this?
Below is the code I have below. I tried
document.text.value = "hello";
but the text "hello" stays in the box when I start typing.
HTML
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick(clearText)>
Javascript
function(clearText) {
document.text.value = " ";
}
When the text field is empty, the placeholder will reappear automatically.
When the clear button is clicked, you can use onclick attribute on the button and define the function like this:
Implementation with pure JS:
<script>
function clearText() {
// we use getElementById method to select the text input and than change its value to an empty string
document.getElementById("my_text").value = "";
}
</script>
<!-- we add an id to the text input so we can select it from clearText method -->
<input id="my_text" type="text" placeholder="hello">
<!-- we use onclick attribute to call the clearText method -->
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
Or you can use jQuery:
<script>
function clearText() {
$("#my_text").val("");
}
</script>
<input id="my_text" type="text" placeholder="hello">
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
The easiest way to do it:
<input placeholder="hello" onchange="if (this.value == '') {this.placeholder = 'hello';}"
/>
You were very close
HTML :
<input type="text" id='theText' placeholder="hello">
<input type="button" value="clear" onclick='clearText()'>
JavaScript :
clearText = function(){
document.getElementById('theText').value = "";
}
Demo : http://jsfiddle.net/trex005/7z957rh2/
There are multiple problems with your javascript syntax, starting from function declarations and ending with onclick event specification.
However, you were on the right way, and code below does the trick:
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('input').value=''">
However, it will only work if this is the only input box in your document. To make it work with more than one input, you should assign it an id:
<input type="text" id="text1" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('#text1').value=''">
and use "text2" and so on for other fields.
You should not forget to set "return false;"
document.getElementById('chatinput').onkeypress = function(){
var key = window.event.keyCode;
if (key === 13) {
var text = this.value;
var object = document.getElementById('username_interface');
email = object.email;
username = object.username;
empty = /^\s+$/;
// function Send Message
this.value = "";
return false;
}else{
return true;
}}
Below is a sample HTML code with script tag using jquery:
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var email_def= "Enter email address";
$('input[type="email"]').attr('value', email_def).focus(function() {
if ($(this).val() == email_def) {
$(this).attr('value', '');
}
}).blur(function() {
var val = $(this).val();
if (val == '') {
$(this).attr('value', email_def);
alert(val);
alert(email_def);
}
});
});
</script>
</head>
<body>
<form>
Email: <input type="email"> <input type="submit" id="submit">
</form>
</body>
</html>
Steps to reproduce:
Click in the input box. Placeholder value is cleared. Click outside, placeholder value is now reset back.
Click in the input box. Type some text. Delete the text. Click outside. The placeholder value is not reset back.The alert are triggered. Even the email_def is being shown in alert. Now, the attribute value is not being reset to value of email_def.
My question is why is the line $(this).attr('value', email_def); not being invoked inside the blur function.
Edit: Thanks for the answers. Both, the placeholder of html5 and also replacing with the $(this).val(); line seems to be working correctly
Instead of $(this).attr('value', email_def);, consider $(this).val(email_def);. It will behave as you've specified.
Rafael is correct to suggest using HTML's placeholder instead, unless you have some specific need regarding Internet Explorer.
Use HTML5 Placeholder attribute
A hint to the user of what can be entered in the control . The
placeholder text must not contain carriage returns or line-feeds. This
attribute applies when the value of the type attribute is text,
search, tel, url or email; otherwise it is ignored.
http://jsfiddle.net/xj7v8gd7/
<form action="<some action>">
<input type="email" id="emailForm" size="30" placeholder="Enter email address"><br>
<input type="submit" value="Submit">
</form>
Rafael is correct. However, if you need it to work in browsers old enough that they don't support the placeholder attribute, just switch your value attribute setters to use the overload on val() instead. So:
$(this).val('Enter the email address') //for example
See that demonstrated below (it looked like only the one in the blur method was actually a problem.
$(document).ready(function() {
var email_def = "Enter email address...";
$('input[type="email"]').attr('value', email_def).focus(function() {
//alert('focus');
if ($(this).val() === email_def) {
$(this).val('');
}
}).blur(function() {
if ($(this).val() === '') {
$(this).val(email_def);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
Email:
<input type="email" id="emailForm" size="30" />
<input type="submit" id="submitForm" />
</form>
I want to get value of one textbox and put the same in another textbox.
my code is :
<input type="text" value="Keyword" id="one" />
<input type="text" value="Search" id="two" />
button
jquery:
var input = $("#one");
$('#btn').click(function(){
alert('dgdhjdgj');
var oneValue = $('#one').val();
alert("one value "+ oneValue);
var twoVal = $('#two').val($(input).attr('value'));
alert('two Val' + twoVal);
});
demo is here.
Issue : when I change the value of textbox #one, it does not change the value of #two.
thanks in advance.
$(input).attr('value') gets the value of the value attribute, which is the initial value, not the current value.
You had it right two lines earlier. Use val().
Try this
HTML
<input type="text" placeholder="Keyword" id="one" />
<input type="text" placeholder="Search" id="two" />
button
Script
$('#btn').click(function() {
var oneValue = $('#one').val();
$('#two').val(oneValue)
})
Fiddle
write textarea and check it. JSFIDDLE
$("#add").click(function(){
var thenVal = $("#textarea_first").val();
$("#textarea_second").val(thenVal);
});
if all that you want to change the text of second textbox, as soon as you change the text of first textbox, just use jQuery's change event.
just try this then:
$('#one').on("change",function(){
$('#two').val($(this).val());
});