I want to stop taking input in the text field once 10 characters have been entered.
What I have so far is not working:
$(document).ready(function() {
$('#comment').keypress(function(event){
if ($('#comment').val()).length == 10) {
event.preventDefault();
}
});
});
What am I missing?
You don't need jQuery for this. Use the maxlength attribute instead. It can be used with input or textarea elements:
<input id="comment" maxlength="2" type="text">
<textarea maxlength="100"></textarea>
You can use the maxlength attribute of the input tag
http://www.w3schools.com/tags/att_input_maxlength.asp
Related
How can I delete automatically the text on a textarea if the text line exceed more than 100? I want to do this because it slow down the browser.
HTML:
<div class="form-group">
<textarea class="form-control" id="text" wrap="off"
placeholder="Autodelete the text here if value exceed more than 100!"></textarea>
</div>
This is what i would propose to do, which may be good to really keep it safe on the range.
let text = document.getElementById('text'); //Select your textarea
text.addEventListener("keyup" (e)=> {
//Make it listen to a keyup event
//So if someone left a key pressed, the screen will show the slice happening
if (e.target.value.length > 100) e.target.value = e.target.value.slice(0,100);
//Then, if its value exceeds 100 length, use slice method which create a new string
//So, as it creates a new string you save it with assign operator
});
I hope that solves your problem. Let me know if you need clarify something.
document.getElementById('text').onkeyup = function () {
console.log('text', this.value.length)
if (this.value.length > 100) {
this.value = '';
}
};
<div class="form-group">
<textarea class="form-control" id="text" wrap="off"
placeholder="Autodelete the text here if value exceed more than 100!"></textarea>
</div>
You can try like this with using normal javascript.
Use maxlength for maximum character.
maxlength="nuber_of_characters"
<div class="form-group">
<textarea class="form-control" id="text" maxlength="100"
wrap="off" placeholder="Autodelete the text here if value
exceed more than 100!"></textarea>
</div>
Note: if you want to delete the whole text then do with js to count length and empty the whole text. Ref: Count textarea characters
Your can simply use maxlength attribute and put the value to 100
<textarea class="form-control" id="text" wrap="off" maxlength=100
placeholder="Autodelete the text here if value exceed more than 100!">
</textarea>
If that does't work then -
You first need to add javascript function in which the length of textarea value is being calculated after that when the value becomes > 100 disable the textarea so that the user can't add more.
document.getElementById('text').onkeyup = function () {
console.log('text', this.value.length)
if (this.value.length > 100) {
alert('Limit exceeded to '+this.value.length)
this.disabled = true;
}
};
<div class="form-group">
<textarea class="form-control" id="text" wrap="off"
placeholder="Autodelete the text here if value exceed more than 100!">
</textarea>
</div>
There is a dark side of this code that if the user is spamming continously the if condition won't be triggered. When the user stops after long press the textarea will get disabled.
You can set the maxlength attribute to 100 like -
<textarea class="form-control" id="text" wrap="off" maxlength=100
placeholder="Autodelete the text here if value exceed more than 100!">
</textarea>
This wont allow user to enter more then 100 words
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>
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 show button on the form after typing something inside input element in Jsp.
<input type="text" id="phoneNumber" name="Number" maxlength="10" size="15" onfocus="this.value=''" value="Enter your number" autocomplete="off">
<br/><br/>
<span style="color:red" class="title1" id="checkPhone"></span><br/>
<input type="submit" class="sendBtn" id="btSend" name="btSend" value="NextStep" style="display: none">
can you help me?
You can use keyup event of textbox to detect if something is typed in, also check if the textbox has some text to hide button if it is empty
Live Demo
$('input').keyup(function(){
if($.trim(this.value).length > 0)
$('#btSend').show()
else
$('#btSend').hide()
});
You might need to be specific about the inputs instead of doing it with all input elements e.g you can do it with inputs have some class
Does this do what you need?
$('#phoneNumber').change(function() {
$('#btSend').show();
});
var inp = $("#txt").val();
if(jQuery.trim(inp).length > 0)
{
$("#button").show();
}
Hope this works for you
$('#phoneNumber').focusout(function () {
if ($(this).val().length > 0) {
$('#btSend').show();
} else {
$('#btSend').hide();
}
});
I have a form with several text fields. I want to change a span tag when I write something in the field. Like this:
Any ideas?
You can use keyup and then replace the span content with the textbox value.
<input id="test" type="text" />
<span id="content"></span>
$("#test").keyup(function() {
$("#content").html($("#test").val());
});
http://jsfiddle.net/
Edit:
You can also use $(this).val() as pXL has suggested.
$("#test").keyup(function() {
var val = $(this).val();
$("#content").html(val);
});
You can simply use jquery for this. For eg
<input type="text" id="mytext"/>
<span id="content"></span>
$(document).ready(function(){
$("#mytext").keyup(function(){
$('#content').html($(this).val());
})
})
I would use $.keyup() and update the html with input value.
Demo: Working Demo
$(document).ready(function()
{
// Regular typing updates.
$("#input").keyup(function()
{
$("#output").html($(this).val());
});
// If pasted with mouse, when blur triggers, update.
$("#input").change(function()
{
$(this).keyup();
});
// Any value loaded with the page.
$("#input").keyup();
});
The lost focus is also an aproach,
html:
<input type="text" id="txa" value="123" />
<span>345</span>
jquery:
$('input[id=txa]').blur(function () {
$(this).next("span").text($(this).val());
});
Glad to help.