2013-04-23 82 views
4

我希望我的提示框最多可输入10个字符。如果用户在此之后按任意键,则不应输入文本。在提示框中限制输入

当前我正在使用的代码使用条件来检查输入是否处于限制范围内。如果超出限制,它将接受文本,但会一直提示用户,直到输入处于限制范围内。该值将分配给person1只有在输入限制内时,代码才会继续前进。

我想要的输入框不接受超过指定的输入更第一名本身..

请帮助。

的代码如下:

 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"); 
     } 
+1

Shadow 2013-04-23 05:07:52

+0

这是为文本框。它的工作提示框?? – Lucy 2013-04-23 05:10:37

+0

哦提示...嗯。我会环顾四周。 – Shadow 2013-04-23 05:12:06

回答

0

使用提示框无法完全解决此问题。要解决此问题,您必须制作一个jQuery UI自定义对话框

在此你正在

基本上是一个文本框和两个按钮“OK” &“取消”的表单标签内和嵌入你的代码jQuery中,使它们弹出像一个提示框..

我已使用默认功能对话框http://jqueryui.com/dialog/#default此页面上为我的基金会......

的代码说明到底是给..

这里是这样做的全部代码...

<!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> 

说明用于代码..

  • A按钮被显示在网页上。Onclick会弹出一个弹出对话框 有一个文本框和2个命令按钮。
  • 输入被限制为10个字符。采取将在按钮上作为输出以下网页印刷
  • 输入..作为计数器已被指定,直到5
  • 输入将采取5次..

上面的代码可以完全改性根据个人的需要..希望这个答案是有帮助的。如果有任何疑问,请随时问..

0

你不能。

避免prompt(),以及其亲属,alert()confirm()。正如你发现的那样,他们所能做的事情都非常有限;他们还经常阻止用户在浏览器中执行其他任务,例如切换到其他选项卡。对于类似的效果,您可以改为使用页内模式。有关这样的例子见Bootstrap modals

2

我能想到的所有东西都是一种做...尽管如果用户的文本超过了指定的数量,提示符会再次出现。希望有所帮助。

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) 
+0

他已经在做什么了! – Shadow 2013-04-23 05:36:13

1

噩耗恐怕 - 它不能与prompt()

做不过你可以使用jQuery Dialogs

您不必使用jQuery做类似的事情 - 但也许看看有什么想法。 基本上,这种方式你将有一个正常的HTML方法(所以你可以使用maxlength或javascript来限制输入)

如果你使用模态对话框,那么你将获得非常相似的效果。