detect the onchange and trigger an event
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');
加载中,请稍侯......
精彩评论