JQuery Masked Input插件不起作用

我在我的Web項目中添加了JQuery Masked Input插件，但它根本不起作用。JQuery Masked Input插件不起作用

該插件可以在這裏找到：http://digitalbush.com/projects/masked-input-plugin

我已經包含JQuery的libray和蒙面的輸入插件到我的JSP，並稱爲mask功能我html <input>元素：

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

    <!-- JS ---> 
    <script src="js/jquery-1.11.0.js"></script> 
    <script src="js/masked-input-jquery-1.3.1.js"></script> 

    <title>Test</title> 
</head> 
<body> 

    <script type="text/javascript"> 
     $("#name").mask("99/99/9999"); 

    </script> 

    <form id="" method="" action=""> 
    <div> 
     <label for="name"> 
      Name<b style="color: red">*</b> 
     </label> 
     <input name="studentName" maxlength="255" autofocus="autofocus" type="text" id="name"/> 
......

當我訪問我的JSP時，即使在文本字段上輸入任何內容之前，Chrome控制檯上也會顯示以下內容：

Uncaught ReferenceError：iMask沒有定義

你能幫我嗎？代碼有什麼問題嗎？

來源

2014-02-24 darkly_dreaming_dexter

我不認爲它會解決您當前的問題，但您對.mask的調用將不起作用，因爲它在解析頁面的其餘部分之前運行。您需要將調用包裝在jQuery文檔就緒函數中：$（document）.ready（function（）{...您的代碼在這裏...}）; – HJ05

在document.ready中包裝應該實際上解決了這個問題。 jQuery和mask插件已經被執行了，因爲它們在腦海中。但是當你做$（'＃name'）。mask（...）時，它什麼也不選。在文檔就緒之前在插件上調用掩碼可能意味着掩碼尚未加載所需的所有內容。即使你沒有得到這個錯誤，它仍然無法工作，因爲你需要$（'＃name'）來選擇一個尚未創建的dom元素。 –

@ HJ05你應該將其作爲回答發佈，以便OP可以接受它，並將其上傳。 –

這可能會也可能不會解決您當前的問題，但您對.mask的調用將不起作用，因爲它在頁面的其餘部分（輸入字段所在的位置）之前運行。

您需要包裝中的呼叫jQuery的文件準備好功能：

$('document').ready(function() { 
    $("#name").mask("99/99/9999"); 
});

這告訴腳本等待頁面加載足以讓瀏覽器知道在文檔中輸入字段。

作爲附加評論，最佳實踐表示在關閉正文標記之前放置所有腳本標記（有一些例外）。否則，您應該將腳本標記移動到標記的其餘部分。

來源

2014-02-25 02:15:29 HJ05

是的，我包裝的電話，它完美的工作！奇怪的是，錯誤消息（「Uncaught ReferenceError：iMask未定義」）仍然出現在控制檯上。但現在工作正常。謝謝你的哥們。 –

你需要把你的jQuery包裝在document.ready中，就像幾個人已經提到的那樣。您還需要調整您的面具以匹配您所需的輸入。我假設你只想要字母字符。 This JSFiddle shows你就是這樣一個假設的例子。

如果你想要字母數字，只需用'*'替換'a'即可。下面是jQuery代碼：

$(function() { 
    //The # of "a"s you enter depends on your max field input 
    //The "?" makes any character after the first one optional 
    $("#fname").mask("a?aaaaaaaaaaaaaaaaaaaaaaaa"); 
    $("#lname").mask("a?aaaaaaaaaaaaaaaaaaaaaaaa"); 
});

還應該說，使用蒙面輸入插件可能無法驗證一個名字最好的選擇，因爲它是爲固定寬度的輸入。如果您想驗證不同長度的字母字符，請考慮執行類似this instead的操作。

來源

2014-02-24 22:43:54 RossG

謝謝我的朋友。事實上，我還想使用JQuery/Javascript插件來驗證輸入字段（名稱，日期，電話號碼，SSN等）。你知道一個好的嗎？ –

您使用的插件實際上非常擅長強制日期/電話號碼和SSN，因爲這些都是固定寬度。但檢查出其中之一：https：//github.com/posabsolute/jQuery-Validation-Engine或http://jqueryvalidation.org/ – RossG

這是因爲jQuery已下載但尚未準備就緒。嘗試

$(function(){ 
// your code goes here 
});

來源

2014-02-25 02:20:13

JQuery Masked Input插件不起作用

回答

相關問題