Geek Answers Handbook

Limit input to the "Request" field

I want the hint field to have a maximum of 10 characters. If the user presses any key after this, the text should not be entered.

Currently, the code I use uses a condition while to check if the input is in the limit. If it exceeds the limit, it accepts the text, but continues to request the user until the input is in the limit. The value will be assigned to person1 and the code will only act when the input is within the limit.

I want the input field not to accept more than the given input in the first place.

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"); }
+4
source share
4 answers

This problem cannot be completely resolved using the help window. To solve this problem, you should create a jQuery user interface user interface dialog box.

Basically, you create a text box and two OK and Cancel buttons inside the form tag and paste the code into jQuery so that they pop up like a tooltip.

I used the default functions dialog on this page http://jqueryui.com/dialog/#default as my foundation ...

An explanation for the code is given at the end.

Here is the complete code for 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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="button" value="OK" onclick="getPdata1()" /> <input type="button" value="cancel" onclick="getPdata( this.value )" /> </form> </div> </body> </html>

Explanation for the code ..

  • A button is displayed on the web page. A dialog box appears with a text box and 2 commands.
  • Entrance was limited to 10 characters.
  • The entered data will be printed on the web page under the button as an output.
  • Entrance will be accepted 5 times when the counter is specified up to 5 ..

The above code can be completely changed according to individual needs. Hope this answer is helpful. If in doubt, please feel free to ask.

0
source

All I can think of is to use ... to re-open the tooltip if the user's text has exceeded the specified amount. Hope this 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)
+2
source

Sad news I'm afraid this cannot be done with prompt()

However, you could do a similar thing using jQuery Dialogs

You do not need to use jQuery, but maybe take a look at this idea. Basically, this way you will have a normal HTML approach to this (so you can use maxlength or javascript to limit the input)

If you use a modal dialog box, you will get a very similar effect.

+1
source

You can not.

Avoid prompt() as well as its relatives, alert() and confirm() . As you have discovered, they are all quite 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 the modal option instead. See Bootstrap Modifications for an example of one of these.

0
source

More articles:


All Articles