logo标签列表

限制 Prompt 对话框中的输入

javascriptjqueryhtml
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");
        }
1
<input maxlength="10"/> - Shadow
这是针对文本框的，它能用于提示框吗？ - Lucy
哦，提示……嗯，我会看看周围。 - Shadow
哈，这是一个棘手的问题。简短的回答是——不可能。我认为只有在您能够检测到提示框是否具有焦点时才能完成此操作，然后您可以取消用户按键事件传播（但仍然很难检测到哪些键被按下）。如果无法检测提示框的焦点，则我不知道该怎么办，如果有人有解决方案，我会很好奇。 - i--
@i--：当模态对话框弹出时，键盘事件根本不会传递到页面。 - user149341
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)
2
很遗憾，使用 prompt() 是不可能的。
但是你可以使用 jQuery 对话框 来实现类似的效果。
你不一定需要使用 jQuery，但也许可以看一下以了解思路。基本上，这样你就可以采用普通的 HTML 方法来实现（因此你可以使用 maxlength 或 JavaScript 来限制输入）。
如果你使用模态对话框，那么你将会获得非常相似的效果。
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>

代码解释：

  • 网页上显示一个按钮。单击后会显示一个弹出对话框，其中包含一个文本框和两个命令按钮。
  • 输入被限制为10个字符。
  • 输入将作为输出打印在按钮下方的网页上。
  • 输入将被接受5次，因为计数器已指定到5。

以上代码可以根据个人需求进行完全修改。希望这个答案有所帮助。如果有任何疑问，请随时提问。

0

你不能这样做。

避免使用prompt()，以及它的相关函数alert()和confirm()。正如你所发现的那样，它们在功能上都非常有限；而且它们通常会阻止用户在浏览器中执行其他任务，比如切换到其他标签页。为了达到类似的效果，你可以使用一个页面内的模态框。参见Bootstrap modals，其中提供了一个这样的例子。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接