2015-02-23 96 views
3

有沒有辦法創建一個沒有取消按鈕的輸入提示框, 或者不允許用戶在輸入某個值之前關閉提示?javascript提示框沒有取消按鈕?

+0

你爲什麼不模仿提示,然後你可以設計你想要的樣式? – 2015-02-23 08:56:00

+0

提示框太簡單了。他們沒有任何邏輯。您可以使用某種邏輯創建自己的模態對話框,也可以在收到響應後將邏輯應用於提示框響應,並在響應不符合標準時重新顯示該框。由於這發生得相當快,您的用戶將不可能知道它消失並重新啓動。這也讓你有機會改變提示中的文字,以表明你對不適當的反應感到沮喪。但正如其他人指出的那樣:你應該建立一個模式對話框來完成你的任務。 – TheSatinKnight 2018-02-04 21:07:58

回答

4

把你的promt放在一個while循環中,並繼續詢問輸入,直到用戶給出任何。

do{ 
    input = prompt("Give input"); 
}while(input == null || input == ""); 

console.log(input); 

jsFiddle

[注:它以滿足您的要求,我不會建議,因爲它可能會惹惱用戶的方式。如果你想讓用戶填寫你的表單,你可以使用正則表達式。]

+1

downvote的原因是什麼? – 2015-02-23 08:58:25

+1

也許是因爲OP要求取消取消按鈕 – 2015-02-23 09:07:40

+1

OP還提到'不允許用戶關閉提示符,直到輸入一些值。 – 2015-02-23 09:08:21

4

不使用prompt,no。您必須使用現代技術,在頁面頂部呈現div或類似的內容,並禁用其他地方的點擊,並在代碼中調用它時允許異步性質。你可以推出你自己的,或者使用任何許多庫來爲你做。搜索「JavaScript模式對話框」以查找大量選項。

下面是使用自舉一個例子,但是這只是可用的許多選項之一:

$("#the-modal") 
 
    .on("show.bs.modal", function() { 
 
    // When the modal is about to be shown, clear the field 
 
    $(this).find(".field").val(""); 
 
    $(this).find(".btn-primary").prop("disabled", true); 
 
    }) 
 
    .on("shown.bs.modal", function() { 
 
    // When the modal has been shown, focus the field 
 
    $(this).find(".field").focus(); 
 
    }) 
 
    .on("hide.bs.modal", function() { 
 
    // When the modal is closed, display the field's value 
 
    display("Done, entered value: " + $(this).find("input").val()); 
 
    }) 
 
    .find(".field").on("keypress input paste change", function() { 
 
    // When the field's value changes in any way, enable/disable 
 
    // the 'Save Changes' button 
 
    $("#the-modal .btn-primary").prop(
 
     "disabled", 
 
     $.trim($(this).val()).length == 0 
 
    ); 
 
    }); 
 

 
function display(msg) { 
 
    $("<p>").html(String(msg)).appendTo(document.body); 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="//code.jquery.com/jquery.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>Example</title> 
 
</head> 
 
<body> 
 
    <input type="button" value="Click me" data-toggle="modal" data-target="#the-modal"> 
 
    <div id="the-modal" class="modal fade" data-backdrop="static"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h4 class="modal-title">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <label>Please provide the info: 
 
      <input type="text" class="form-control field"> 
 
     </label> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-primary" data-dismiss="modal" disabled>Save Changes</button> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal --> 
 
</body> 
 
</html>

1

我很懷疑,你可以編輯瀏覽器內置的警報,提示或確認警報。但是,您可以創建自己的彈出窗口,除非用戶輸入了內容,否則用戶無法關閉該窗口......但即使如此,用戶仍然可以編輯頁面的HTML或禁用JavaScript。如果用戶必須將某些東西放入盒子而不能關閉它,則應該包含某種服務器端檢查。客戶端瀏覽器中的任何內容都不會真正無法關閉。

+0

謝謝你,那個信息非常有幫助! – user1930115 2015-02-23 09:08:49