2013-04-23 88 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來限制輸入)

如果你使用模態對話框,那麼你將獲得非常相似的效果。