需求:動態複製 input 標籤到 另一個 標籤內 發現複製的結果input的value值不可變


需求:動態複製 input 標籤到 另一個 標籤內  發現複製的結果input的value值不可變

要求:當源input標籤的值改變時,複製的目的標籤的值也要改變


方法:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.0.js"></script>

	<body>
		<div class="test">  
            <ul id="u">  
                <span>1號</span> <input id="ip1" type="text" value="1" /><br />  
                <span>2號</span> <input id="ip2" type="text" value="1" /><br />  
                
            </ul>  
  
            <button id="b">複製</button>  
            <br />  
  
            <ul id="u2">  
            </ul>  
  			<br />  
  			
		<!--也可以直接在標籤中拼接js原生的onchange方法: -->
            <span>3號</span> <input id="ip3" type="text" onchange="this.defaultValue=this.value"  value="1" /><br />
        
		</div>  
	</body>
	
	<script>
		var label = ""; //定義一個全局變量  
		$(function() {
			//給 ID爲 u的ul下的每一個input標籤都綁定值改變時,自動改變標籤顯示默認value值的方法  
			$("#u").find("input").bind("change", function() {
					/*方法一:*/
					var v = $(this).val();
					$(this).attr("value", v) //這句是用改變屬性的方式  

					/*方法二:*/
					this.defaultValue = this.value; //也可以用這一句代替上面兩句  
				
					label = $("#u").html(); //可以在這同時更新全局字符串變量;
			});


			//點擊按鈕執行復制動作
			$("#b").click(function() {
//				label = $("#u").html(); //在這取值也沒問題
				alert(label);
				$("#u2").html(label);
			});
		});
	</script>

</html>


如果不方便用外部 bind方法給目標標籤綁定change方法,也可以用js原生的onchange方法直接在拼接標籤時寫在標籤裏,如下:

<!--也可以直接在標籤中拼接js原生的onchange方法: -->
        <span>3號</span> <input id="ip3" type="text" onchange="this.defaultValue=this.value"  value="1" /><br />


這樣在手動輸入修改文本框的值後,用html()方法獲取的標籤中原來 value=“1”就變成了value=" 我們輸入的值 " 了。

當然,如果是我們用js修改的value的值,那麼我們要用 jq 先獲取到當前文本框的jq對象,然後再 調用 .trigger(onchange);方法 才能達到像手動修改value值同樣的效果

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章