Menu
Is there a way to create a input prompt box that doesn't have the cancel button, or doesn't allow the user to close the prompt until some value is entered?
275
If the user clicks the Cancel button, prompt( ) returns null . If the user clicks the Clear button, prompt( ) erases any current text in the input field. If the user clicks the OK button, prompt( ) returns the value currently displayed in the input field.
prompt returns null when the cancel button is pressed.
To detect the Cancel button (or Esc key) we have to test for a null return from the prompt() function. response will be null on Cancel/Esc. If no text is entered (with OK or Enter) response will be "" (empty string) and will evaluate to false, as does, null .
To cancel an event, call the preventDefault() method on the event. This keeps the implementation from executing the default action that is associated with the event.
Put your promt inside a while loop and continue asking for input until user gives any.
do{
input = prompt("Give input");
}while(input == null || input == "" );
console.log(input);
jsFiddle
[Note : It's a way to fulfill your requirement that I won't suggest as it may annoy user. You can go with regular expression if you want user to complete your form.]
154
Not using prompt, no. You have to use modern techniques, presenting a div or similar on top of the page and disabling clicks elsewhere, and allowing for the asynchronous nature of that in the code calling it. You can roll your own, or use any of the many libraries that do it for you. Search for "JavaScript modal dialog" to find a huge range of choices.
Here's an example using Bootstrap, but that's just one of many options available:
$("#the-modal")
.on("show.bs.modal", function() {
// When the modal is about to be shown, clear the field
$(this).find(".field").val("");
$(this).find(".btn-primary").prop("disabled", true);
})
.on("shown.bs.modal", function() {
// When the modal has been shown, focus the field
$(this).find(".field").focus();
})
.on("hide.bs.modal", function() {
// When the modal is closed, display the field's value
display("Done, entered value: " + $(this).find("input").val());
})
.find(".field").on("keypress input paste change", function() {
// When the field's value changes in any way, enable/disable
// the 'Save Changes' button
$("#the-modal .btn-primary").prop(
"disabled",
$.trim($(this).val()).length == 0
);
});
function display(msg) {
$("<p>").html(String(msg)).appendTo(document.body);
}<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<input type="button" value="Click me" data-toggle="modal" data-target="#the-modal">
<div id="the-modal" class="modal fade" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<label>Please provide the info:
<input type="text" class="form-control field">
</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" disabled>Save Changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>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
