Reputation: 1852
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");
}
Upvotes: 6
Views: 17719
Reputation: 1852
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..
Upvotes: 1
Reputation: 9447
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.
Upvotes: 2
Reputation: 909
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)
Upvotes: 3
Reputation:
You can't.
Avoid prompt()
, as well as its relatives, alert()
and confirm()
. As you've discovered, they're all pretty limited in what they can do; they also often prevent the user from performing other tasks in the browser, such as switching to other tabs. For a similar effect, you can use an in-page modal instead. See Bootstrap modals for an example of one such.
Upvotes: 0