如何從jquery ui對話框中獲取用戶輸入

我有這個英文語言頁面，用戶必須在該頁面中輸入英文短語。該表單位於模式對話框中，通過點擊圖標可以引發該對話框。一切工作到在對話框中顯示窗體的點，但我不知道如何訪問用戶輸入，將根據正則表達式進行檢查。這裏是jQuery代碼：如何從jquery ui對話框中獲取用戶輸入

jQuery(document).ready(function() { 
    var englishTextId = ""; 
    var t2e_dlog = jQuery("div#t2e_dialog").dialog({ 
     autoOpen: false, 
     modal: true, 
     position: "center", 
     resizable: false, 
     draggable: false, 
     dialogClass: "t2e_dlog", 
     height: 140, 
     width: 380, 
     create: function() {         
      jQuery(this).parents(".ui-dialog") 
     .css("border", "solid black 1px")        
      .css("background", "#ece6ff") 
      .css("border-radius", "4px")    
      .find(".ui-dialog-content") 
      .css("font-family", "verdana") 
      .css("font-size", "0.65em") 
      .css("font-style", "normal") 
      .css("color", "#1901B2") 
      .css("padding", "1px") 
      .find(".ui-dialog-header") 
      .css("display","none");  
     } 
    }); 

    jQuery("span.t2e_icon").on("click", function(evnt) { 
    t2e_dlog.dialog("open"); 
    evnt.stopPropagation(); 
    var elementId = evnt.target.id; 
    englishTextId = ("span#t1ee" + elementId.substring(7)); 
    regexId = ("regex" + elementId.substring(7)); 
    // to obscure text associated with the dialog box 
    jQuery(englishTextId).css({"border-radius" : "3px","background" : "blue", "color" : "blue"}); 
    }); 

    jQuery(function() { 
     jQuery("div#t2e_dialog").dialog({dialogClass: 't2e_dialog_style1'}); 
     // removes the dialog box title bar 
     jQuery("#ui-dialog-title-dialog").hide(); 
     jQuery(".ui-dialog-titlebar").removeClass('ui-widget-header'); 
     var input ='<div id="t2e_modal"><p>Please enter the English text here</p><form id="t2e_form" action="#"><input type="text" id="t2e_w" name="t2e_w" size=50><input id="t2e_submit_btn" type="submit" value="Submit"></form></div>'; 
     jQuery("div#t2e_dialog").append(input); 
    }); 

    // unobscures the text   
    jQuery(function() {  
     jQuery("div#t2e_dialog").dialog({ 
     beforeClose: function(event, ui) { 
     jQuery(englishTextId).css({"border-radius" : "3px","background" : "", "color" : ""}); 
     } 
    }); 
}); 
});

任何幫助將不勝感激。

來源

2014-03-29 RoyS

所有的代碼可以通過'及時更換（「請在此處輸入英文文本」）'< - 這就像最好的答案永遠！ – adeneo

你能提供小提琴嗎？ – Kiranramchandran

我無法讓對話框顯示在jsfiddle中，問題在於訪問由對話框中的表單生成的輸入數據。希望這可以幫助。 – RoyS

以下是keyup事件的示例。但是你可以綁定任何可用的事件：

jQuery("body").on("keyup", "#t2e_w", function() { 
    var input_user = jQuery('#t2e_w').val(); 
    console.log(input_user); 
    //reg expression here ... 
});

小提琴：http://jsfiddle.net/j6R22/22/

來源

2014-03-29 09:09:58 progzy

輸入正在控制檯中顯示，但如何將其置於變量中？ var user_input = jQuery（'＃t2e_w'）。val（）;不起作用。 – RoyS

我更新了小提琴。「var user_input = jQuery（'＃t2e_w'）。val（）;」工作... – progzy

此代碼jQuery（「body」）。on（「keyup」，「＃t2e_w」，function（evnt）{evnt.preventDefault（）; console.log（「Submited」）; console.log（jQuery （'＃t2e_w'）。val（））; user_input = jQuery（'＃t2e_w'）;}）;在firebug控制檯中產生預期的輸出，即char by char，但是我不能看到將輸入字符串分配給user_input。我做了全局的user_input以避免任何範圍問題。我也嘗試了jQuery API中描述的submit（）方法，但仍然無法獲得所需的user_input值。 – RoyS

如何從jquery ui對話框中獲取用戶輸入

回答

相關問題