Menu
I want my prompt box to take a maximum input of 10 characters.If the user presses any key after that no text should be entered.
Currently the code i am using uses while condition to check whether the input is within limit.If it is beyond limit it accepts the text but keeps prompting the user until the input is within limit.The value will be assigned to person1 variable and the code will proceed forward only when input is within limit.
I want the input box not to accept more than specified input in the 1st place itself..
Please help.
The code is as follows:
person1=prompt("Please enter your data 1(Maximum limit 20)","Sample 1");
while(person1.length > 20){
alert("Keep the message length to 20 chars or less")
person1 = prompt("Please enter your data 1(Maximum limit 20)","Sample 1");
}
991
_%+-]+@[a-z0-9. -]+\. [a-z]{2,3}$"> will restrict the allowed characters according that RegExp pattern (in this case: valid-looking email addresses). The title attribute will be used as a warning / notification when the user tries to submit the data not matching the requirement.
To give a limit to the input field, use the min and max attributes, which is to specify a maximum and minimum value for an input field respectively. To limit the number of characters, use the maxlength attribute.
A prompt box is used if you want the user to input a value. When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed.
The PROMPT command is used to print text on the display for the user to read.
All I can think of is using is a do...while to make the prompt reappear if the user's text was over the specified amount. Hope that helps.
var n = 0, msg = "Please enter your data 1(Maximum limit 20)";
do {
n++;
if(n > 1) msg = "You had too many characters! \nPlease enter your data 1(Maximum limit 20).";
person1=prompt(msg, "Sample1");
}
while (person1.length > 20)
Sad news I'm afraid - it can't be done with prompt()
However you could do a similar thing using jQuery Dialogs
You don't have to use jQuery - but maybe have a look to get the idea. Basically, this way you will have a normal HTML approach to this (so you can either use maxlength or javascript to limit the input)
If you use a modal dialog, then you will achieve a very similar effect.
40
This problem cannot be completely solved using prompt box.To solve this problem you have to make a jQuery UI custom dialog box.
Basically in this you are making a text-box and two buttons "OK"&"Cancel" inside a form tag and embedding thee code in Jquery to make them pop up like a prompt box..
I have used the dialog with default functionality on this page http://jqueryui.com/dialog/#default as my foundation...
Explanation for the code is given in the end..
Here is the full code for doing this...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(document).ready(function ()
{
$('#dialog').dialog({
autoOpen: false,
width: 250,
height: 180,
modal : true,
resizable: false,
show:"slow"
});
$('#put').click(function() {
$( "#dialog" ).dialog( "open" );
});
});
function getPdata( arg ) { //Function called when Cancel button is pressed
var f = document.getElementById( 'pForm' );
// exit immediately
close();
return;
}
function close(){
$( "#dialog" ).dialog( 'close' );
}
var cnt=1;
function getPdata1() { //function called when ok button is pressed
var f = document.getElementById( 'pForm' );
var n = $("input[name='name']").val();
alert(n.length);
if (n.length <= 10) {
$('<div />',{id:"div" + cnt }).html(n).appendTo('body'); //crated div will have an id as `div`+ count;
} else {
alert('the data you have enterd is not in limit.Please try again');
return;
}
close();
if (cnt < 5) {
f.name.value = "";
$("#dialog").dialog('open');
cnt++;
}
}
function show()
{
document.getElementById("but1").style.visibility="visible";
}
</script>
</head>
<body>
<div>
<button type="button" id="put" >Insert data</button>
</div>
<div id="dialog" title="Input Data"> <!--the actual contebts of dialog box-->
<form id="pForm" >
name: <input type="text" name="name" width='50' height='100' maxlength="10" placeholder="Fill in your data" /><br><br>
<input type="button" value="OK" onclick="getPdata1()" />
<input type="button" value="cancel" onclick="getPdata( this.value )" />
</form>
</div>
</body>
</html>
Explanation for the code..
The above code can be modified completely according to individual needs..Hope this answer is helpful.If any doubt please feel free to ask..
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With