jQuery设置获取子页面（iframe）与父页面的元素值以及文本框onchange事件失效问题

iframe页面改动parent页面的隐藏input部件value值，不能触发change事件。

实现一个依据iframe页面返回充值卡类型不同，将数据绑定到不同的input控件中。

点击选择弹出一个iframe。点击充值卡数据行。返回:

1、充值卡类型。

2、充值卡id（用的UUID）。

3、充值卡号（字符串）。

遇到的问题是当iframe选择充值卡时，无法获取parent页面input部件value值的change事件。

parent页js

$("#id_card_type").change(function(){
//事件无法捕获
});

parent页form

$(this).children().click(function(){
    var cid=$(this).parent('tr').attr('item_id');
	var cn=$(this).parent('tr').children('td').eq(0).html();
	var ct=$(this).parent('tr').attr('item_type');
	$('#id_card_id', window.parent.document).val(cid);
	$('#id_cardno', window.parent.document).val(cn);
	$('#id_card_type', window.parent.document).val(ct);
 
});

解决例如以下：

iframe页js

$(this).children().click(function(){
  var cid=$(this).parent('tr').attr('item_id');
  var cn=$(this).parent('tr').children('td').eq(0).html();
  var ct=$(this).parent('tr').attr('item_type');
  $('#id_card_id', window.parent.document).val(cid);
  $('#id_cardno', window.parent.document).val(cn);
  $('#id_card_type', window.parent.document).val(ct);
  //$('#id_card_type', window.parent.document).trigger('change'); //无效
  window.parent.$('#id_card_type').trigger('change'); //有效
});

 

问题总结

1、子页面（iframe页）获取及设置父页面的元素的值：

获取parent页面元素：$('#父页面控件ID', window.parent.document).val();

设置parent页面元素：$('#父页面控件ID', window.parent.document).val("需设置到父页面元素的内容");

2、父页面获取及设置子页面（iframe页）的元素的值：

获取子页面（iframe页）元素：$("#iframe的ID").contents().find("#iframe中的控件ID").val();

设置子页面（iframe页）元素：.$("#iframe的ID").contents().find("#iframe中的控件ID").val("需设置到父页面元素的内容");

3、子页面（iframe页）设置父页面元素的onchange事件：

设置parent页面元素onchange事件：window.parent.$('#父页面控件ID').trigger('change'); //有效

4、设置当前页面元素的onchange事件：使用jQuery绑定input propertychange事件

$("#当前页面元素的ID").bind("input propertychange",function(event){      

        console.log($("#当前页面元素的ID").val();

) });

 

下面将详细描述上面第4点的操作方式及注意事项：

Js/jQuery实时监听input输入框值变化

前言

在做web开发时候很多时候都需要即时监听输入框值的变化，以便作出即时动作去引导浏览者增强网站的用户体验感。而采用onchange时间又往往是在输入框失去焦点（onblur）时候触发，有时候并不能满足条件。

首先看一下dom中元素事件：

1、onpropertychange： IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 在用js脚本改动该元素值时候亦能触发onpropertychange事件。

2、oninput：是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。

3、onchange： (a)当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）；(b)当前对象失去焦点(onblur)；

jQuery用法

$("#input1").bind("input propertychange",function(event){
       console.log($("#input1").val())
});

原生Js

<script type="text/javascript">
    // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
        function OnInput (event) {
            alert ("The new content: " + event.target.value);
        }
    // Internet Explorer
        function OnPropChanged (event) {
            if (event.propertyName.toLowerCase () == "value") {
                alert ("The new content: " + event.srcElement.value);
            }
        }
 </script>
 //Input标签
 <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />

 ———————————————— 
原文链接：https://blog.csdn.net/idomyway/article/details/79078625

 

js 实时监听input中值的变化，值改变时自动计算填充到另一个input中

<table style="border-collapse:separate; border-spacing:0px 10px;">
 <tr>
  <td align="right">应收现金：</td>
  <td><input id="accountReceivable" autoComplete='off'></td>
  <td>元，折扣：</td>
  <td><input id="vipdiscount"  readonly="true"></td>
  <td align="right">实收：</td>
  <td><input id="receipts" readonly="true"></td>
  <td>元 </td>
  <td>消费类型：<select id="conType"><option value="1" >报名费</option><option value="2" >酒水零食费</option></select></td>
  <td><a id="btnSend" class="easyui-linkbutton">提交</a></td>
									   
 </tr>
</table>

$(function(){  
 
	$('#accountReceivable').bind('input propertychange', function() {  
		var a = $('#accountReceivable').val();
		var b = $('#vipdiscount').val();
		var sum= a * b;
		
	    $('#receipts').val(sum);  
	}); 
  
})  

效果图：应收现金每输入一个数会自动计算并填充到实收的输入框。css样式代码我就不贴出来了，以上代码能实现实时计算功能就可以了

 ———————————————— 
原文链接：https://blog.csdn.net/qinyf2015/article/details/78666633