php :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;"/>
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="inserttext.js"></script>
</head>
<body>
<div>
<input name="tag" type="text" id="tag" value="這是插入的資料" />
<input id='insert_img' type='button' value='插入'/>
</div>
<textarea name="product_introduction" id="product_introduction"></textarea>
</body>
</html>
<script type='text/javascript'>
$(document).ready(function() {
//產品介紹插入圖片
$('#insert_img').click(function(){
insertAtCursor('product_introduction','tag');
});
});
</script>
inserttext.js : (放在與php同層)
function insertAtCursor(target, from)
{
myField = document.getElementById(target);
myValue = document.getElementById(from).value;
//IE support
if (document.selection)
{
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
sel.select();
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == '0')
{
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
// save scrollTop before insert
var restoreTop = myField.scrollTop;
myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
if (restoreTop > 0)
{
// restore previous scrollTop
myField.scrollTop = restoreTop;
}
myField.focus();
myField.selectionStart = startPos + myValue.length;
myField.selectionEnd = startPos + myValue.length;
} else {
myField.value += myValue;
myField.focus();
}
}
顯示結果 :
↓
↓點選 "插入"
↓
參考資料:
http://blog.csdn.net/niuox/article/details/7263792
沒有留言:
張貼留言