如何从jquery ui对话框中获取用户输入

时间:2014-03-29 08:20:37

标签: jquery jquery-ui input modal-dialog

我有这个英文语言页面,用户必须在表格中输入英语短语。表单位于模式对话框中,通过单击图标来激活。一切都可以在对话框中显示表单,但我不知道如何访问将根据正则表达式检查的用户输入。这是jQuery代码:

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" : ""});
       }
     });   
 });   
});    

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

以下是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/