需求:動態複製 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值同樣的效果