detect the onchange and trigger an event_问答_开发者

detect the onchange and trigger an event

开发者 https://www.devze.com 2023-03-26 15:31 出处：网络

basically, input[name=sys_title] value is input to input[name=g_title] and input[name=g_title] is input to input[name=headline].

相关专题：jquery

basically, input[name=sys_title] value is input to input[name=g_title] and input[name=g_title] is input to input[name=headline].

Im using keyup() to detect the change event to populate 'g_title' from 'sys_title, but 'headline' input doesnt detect the change in 'g_title' unless i tab out of g_title input. is there any way to populate the 'headline' simultaneously as it detects change in 'g_title' input??

<!DOCTYPE html>
<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body> 
<label> sys title</label>
<input name="sys_title" type="text" size="35" value="">
<label>full title </label>
<input name="g_title" type="text" size="35"  value=""/>
<label>headline</label>
<input name="headline" type="text" value=""/>
 <script>
 (function($){ 
  $.fn.updateme = function(options) { 
   var defaults = { 
   onlyIfEmpty: false, 
    useDisplay: false, 
   index:-1,
   delimiter : ":",
    fieldName: "g_title", 
  }; 

 var options = $.extend(defaults, options); 

 return this.each(function() { 
  obj = $(this); 



 //  obj is curren input field get v 
 var fieldValue = obj.attr("value");
 if ((options.onlyIfEmpty == false)|| fieldValue.length==0) { 
 className = "updateme-fieldname-"+options.fieldName;
if (options.useDisplay) {
    obj.addClass("updateme-display");
}
if (options.index>=0) {
    obj.addClass("updateme-index-"+options.index);
}

   obj.addClass(className);
  $(':input[name="'+options.fieldName+'"]').keyup(function() { 
        newObj = $(this); 
    //  $("."+className).val(newObj.val()).change();

        $("."+className).each(function(index) {
                if ($(this).hasClass("updateme-display")) {
                    var selected = $("option:selected",newObj);
                    var displayValue = selected.text();

                    if ($("[class^='updateme-index-']")) {
                        index = 1;
        displayValue =   displayValue.split(options.delimiter)[index];
                    }       
             $(this).val(displayValue);                     

                } else {
                    $(this).val(newObj.val());

                    }


        });
  }).keyup(); 
  }

});
 };
 })(jQuery); 


 //register with 

$().ready(function() { 

$("input[name='g_开发者_如何学运维title']").updateme( { 
 onlyIfEmpty: true, 
 useDisplay: false, 
 fieldName: "sys_title" 
 }); 

 $("input[name='headline']").updateme( { 
 onlyIfEmpty: false, 
  useDisplay: false, 
  fieldName: "g_title" 
  }); 


});
</script>

</body>
</html>

Use the change event instead of keyup

$(':input[name="'+options.fieldName+'"]').bind('change keyup', function() { 
        newObj = $(this); 

        $(".updateme-fieldname-"+this.name).each(function(index) {
                if ($(this).hasClass("updateme-display")) {
                    var selected = $("option:selected",newObj);
                    var displayValue = selected.text();

                    if ($("[class^='updateme-index-']").length) {
                        index = 1;
        displayValue =   displayValue.split(options.delimiter)[index];
                    }       
             $(this).val(displayValue);                     

                } else {
                    $(this).val(newObj.val());

                    }


        });
  }).trigger('change');