Java Script แทรกข้อความที่ cursor อยู่ (2009-02-11)
script ที่น่าใช้อีกตัวนึง คิดว่าน่าจะมีโอกาสเอาไปใช้กันได้เยอะนะครับ
<script>
var elementName="";
function setElement(ele){
elementName=ele.name;
}
function insertToBody() {
var tag=document.getElementById('variables').value;
var myField;
if (elementName == "" ){
return false;
}
myField = document.getElementById(elementName);
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = tag;
myField.focus();
}
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
var cursorPos = endPos;
myField.value = myField.value.substring(0, startPos)
+ tag
+ myField.value.substring(endPos, myField.value.length);
cursorPos += tag.length;
myField.focus();
myField.selectionStart = cursorPos;
myField.selectionEnd = cursorPos;
}
else {
myField.value += tag;
myField.focus();
}
}
</script>
ตัวอย่างการประยุกต์ใช้นะครับ
<table border='0' width="100%">
<tr>
<td width="50%">
<table>
<tr><td><INPUT TYPE="checkbox" NAME="send_flag" id="send_flag">Send to sender</td><td> </td></tr>
<tr><td>From</td><td><input type="text" name="send_from" id="send_from" onfocus="setElement(this)"></td></tr>
<tr><td>Reply-To</td><td><input type="text" name="send_reply" id="send_reply" onfocus="setElement(this)"></td></tr>
<tr><td>Subject</td><td><input type="text" name="send_subject" id="send_subject" onfocus="setElement(this)"></td></tr>
<tr valign="top"><td>Body</td><td><textarea id="send_body" name="send_body" cols="50" rows="7" onfocus="setElement(this)"></textarea></td></tr>
</table>
</td>
<td valign="top">
Variable<BR>
<select id='variables'>
<option value="$(SUBJECT)">SUBJECT</option>
<option value="$(FROM)">From</option>
<option value="$(TO)">To</option>
<option value="$(SOURCEIP)">SourceIP</option>
<option value="$(DATE)">Date</option>
<option value="$(REASON)">Reason</option>
<option value="$(ACTION)">Action</option>
<option value="$(HEADER)">Header</option>
<option value="$(SIZE)">Size</option>
<option value="$(POSTMASTER)">Postmaster</option>
</select>
<input type="button" value="<?=_("Insert")?>" onclick="insertToBody();">
</td>
</tr>
</table>
|