Question

基本上，输入[name = sys_title]值输入到输入[name = g_title]，输入[name = g_title]输入到输入[name = headline]。

我使用keyup（）来检测更改事件以从'sys_title填充'g_title'，但'headline'输入没有检测到'g_title'中的更改，除非我选择退出g_title输入。是否有任何方法可以同时填充'标题'，因为它检测到'g_title'输入的变化？

<!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>

Answer 1

使用change事件代替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');

检测onchange并触发事件

1 个答案: