6

我希望我的提示框最多输入 10 个字符。如果用户在此之后按下任何键，则不应输入任何文本。

目前我使用的代码使用 while 条件来检查输入是否在限制范围内。如果超出限制，它会接受文本但一直提示用户，直到输入在限制范围内。值将分配给 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");
        }
4

4 回答 4

3

我能想到的只是使用 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)
于 2013-04-23T05:30:14.517 回答
2

恐怕是个悲伤的消息-无法解决prompt()

但是你可以使用jQuery Dialogs做类似的事情

您不必使用 jQuery - 但也许看看就会明白。基本上，这种方式你将有一个正常的 HTML 方法（所以你可以使用 maxlength 或 javascript 来限制输入）

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

于 2013-04-23T05:34:08.990 回答
1

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

基本上，您在表单标签内制作了一个文本框和两个按钮“OK”和“Cancel”，并将代码嵌入到 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>

代码说明..

  • 网页上会显示一个按钮。Onclick 将显示一个弹出对话框，其中包含一个文本框和 2 个命令按钮。
  • 输入限制为 10 个字符。
  • 输入的内容将打印在按钮下方的网页上作为输出。
  • 输入将被占用 5 次，因为计数器已经指定，直到 5..

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

于 2013-05-15T05:02:09.793 回答
0

你不能。

避免prompt(), 及其亲属alert()和confirm(). 正如您所发现的，它们的功能都非常有限。它们还经常阻止用户在浏览器中执行其他任务，例如切换到其他选项卡。为了获得类似的效果，您可以改用页内模式。有关此类示例，请参阅Bootstrap modals 。

于 2013-04-23T05:23:44.363 回答