javascript 限制在提示框中输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16161359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Restrict input in a Prompt box
提问by Lucy
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.
我希望我的提示框最多输入 10 个字符。如果用户在此之后按任意键，则不应输入任何文本。
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.
目前我使用的代码使用 while 条件来检查输入是否在限制范围内。如果超出限制，它接受文本但不断提示用户，直到输入在限制范围内。该值将分配给 person1 变量和代码只有当输入在限制范围内时才会前进。
I want the input box not to accept more than specified input in the 1st place itself..
我希望输入框在第 1 位本身不接受超过指定的输入。
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");
}
采纳答案by Lucy
This problem cannot be completely solved using prompt box.To solve this problem you have to make a jQuery UI custom dialog box.
使用提示框不能完全解决这个问题。要解决这个问题，你必须制作一个jQuery UI自定义对话框。
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..
基本上，您在表单标签中制作了一个文本框和两个按钮“确定”和“取消”，并将您的代码嵌入到 Jquery 中，使它们像提示框一样弹出..
I have used the dialog with default functionality on this page http://jqueryui.com/dialog/#defaultas my foundation...
我在这个页面上使用了带有默认功能的对话框http://jqueryui.com/dialog/#default作为我的基础......
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..
代码说明..
- A button is displayed on the webpage.Onclick will show a pop up dialog box having a text-box and 2 command button.
- Input has been restricted to 10 characters.
- Input taken will be printed on the webpage below the button as output..
- Input will be taken 5 times as the counter has been specified till 5..
- 网页上会显示一个按钮。Onclick 将显示一个弹出对话框，其中包含一个文本框和 2 个命令按钮。
- 输入已被限制为 10 个字符。
- 所采取的输入将作为输出打印在按钮下方的网页上。
- 输入将被采用 5 次，因为计数器已被指定，直到 5..
The above code can be modified completely according to individual needs..Hope this answer is helpful.If any doubt please feel free to ask..
以上代码完全可以根据个人需要修改..希望这个回答有帮助.如果有任何疑问请随时问..
回答by James Bruckner
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.
我能想到的就是使用 do...while 使提示重新出现，如果用户的文本超过指定的数量。希望有帮助。
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)
回答by Shadow
Sad news I'm afraid - it can't be done with prompt()
恐怕是个悲伤的消息——它无法做到 prompt()
However you could do a similar thing using jQuery Dialogs
但是你可以使用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)
您不必使用 jQuery - 但也许可以看看这个想法。基本上，通过这种方式，您将拥有正常的 HTML 方法（因此您可以使用 maxlength 或 javascript 来限制输入）
If you use a modal dialog, then you will achieve a very similar effect.
如果您使用模态对话框，那么您将获得非常相似的效果。
回答by duskwuff -inactive-
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 modalsfor an example of one such.
避免prompt()，以及它的亲戚，alert()和confirm()。正如你所发现的，他们能做的事情都非常有限。它们还经常阻止用户在浏览器中执行其他任务，例如切换到其他选项卡。对于类似的效果，您可以改用页内模态。参见Bootstrap modals的一个例子。
