Insert text vào textarea và giữ nguyên vị trí con trỏ 2007-07-19 19:17:18

Đoạn code này dùng để chèn 1 đoạn text vào ô textare mà vẫn giữ được vị trí hiện tại của con trỏ trên textarea.


<script>
function BASIC_InsertTag(tagOpen, tagClose, sampleText) {
var clientPC = navigator.userAgent.toLowerCase(); // Get client info
var is_gecko = ((clientPC.indexOf('gecko')!=-1) && (clientPC.indexOf('spoofer')==-1)
                && (clientPC.indexOf('khtml') == -1) && (clientPC.indexOf('netscape/7.0')==-1));
var areas = document.getElementsByTagName('textarea');
var txtarea = areas[0];
if (document.selection  && !is_gecko) {
var theSelection = document.selection.createRange().text;
if (!theSelection) {
theSelection=sampleText;
}
txtarea.focus();
if (theSelection.charAt(theSelection.length - 1) == " ") { // exclude ending space char, if any
theSelection = theSelection.substring(0, theSelection.length - 1);
document.selection.createRange().text = tagOpen + theSelection + tagClose + " ";
} else {
document.selection.createRange().text = tagOpen + theSelection + tagClose;
}
// Mozilla
} else if(txtarea.selectionStart || txtarea.selectionStart == '0') {
var replaced = false;
var startPos = txtarea.selectionStart;
var endPos = txtarea.selectionEnd;
if (endPos-startPos) {
replaced = true;
}
var scrollTop = txtarea.scrollTop;
var myText = (txtarea.value).substring(startPos, endPos);
if (!myText) {
myText=sampleText;
}
var subst;
if (myText.charAt(myText.length - 1) == " ") { // exclude ending space char, if any
subst = tagOpen + myText.substring(0, (myText.length - 1)) + tagClose + " ";
} else {
subst = tagOpen + myText + tagClose;
}
txtarea.value = txtarea.value.substring(0, startPos) + subst +
txtarea.value.substring(endPos, txtarea.value.length);
txtarea.focus();
if (replaced) {
var cPos = startPos+(tagOpen.length+myText.length+tagClose.length);
txtarea.selectionStart = cPos;
txtarea.selectionEnd = cPos;
} else {
txtarea.selectionStart = startPos+tagOpen.length;
txtarea.selectionEnd = startPos+tagOpen.length+myText.length;
}
txtarea.scrollTop = scrollTop;
}
if (txtarea.createTextRange) {
txtarea.caretPos = document.selection.createRange().duplicate();
}
}</script>
<form id="form1" name="form1" method="post" action="">
  <textarea name="textfield" id="textfield"></textarea>
  <a href="javascript:BASIC_InsertTag('', '', 'In đậm');">Insert B</a>
</form>

Tra loi 12 comment(s) TG 2007-07-19 19:17:18

love 2007-09-25 08:47:49

Còn giả sử muốn khi nó nhấp vào In đậm thì kết quả thế này phải làm sao hả TG:

[indam]_contro_[/indam]

Tra loi

TG 2007-09-26 02:45:17

thì bạn gọi hàm này như sau:
BASIC_InsertTag('[indam]', '[/indam]', 'Bold')

Tra loi

Khắc Qui 2007-10-05 10:12:02

Hi anh TG,
Thật may là em đang tìm cái code Javascript như thế này và đã bắt gặp đúng cái mình cần. Em dùng cái này để click vào một image và đồng thời insert một ký tự tương ứng vào Textarea.
Rất tuyệt, thanhs anh TG nhiều, hy vọng được tiếp cận nhiều bài viết khác nữa.

Tra loi

K Qui 2007-10-19 03:21:03

Trong trường hợp em muốn thay cái <textarea.. bằng <input type="text" name="" size="30"> thì làm sao hả anh TG ? em thử thay như vậy name vẫn ="textarea" nhưng nó hỏng chịu?

Tra loi

TG 2007-10-19 03:22:47

cái này TG cũng chưa thử nữa,

Tra loi

diendan113 2008-02-27 08:30:06

chao ban K Qui! Nếu bạn muốn thay textarea bằng input dang text thì bạn sửa lại dòng này. bạn tìm dòng:

var areas = document.getElementsByTagName('textarea');

và thay bằng dòng này:

var areas = document.getElementsByTagName('input');

nói chung bạn có thể cho vào bất cứ thứ gì bạn muốn.

Tra loi

diendan113 2008-02-27 08:32:19

mình quên một thứ bạn còn phải tạo thêm một thẻ input dạng text để thay thế cái textarea nữa nhé.

Tra loi

gaulucky92 2008-03-24 11:23:07

TG ơi cho mình hỏi 1 cái. Mình muốn vừa dùng script này kết hợp với bộ WYSIWYG NicEdit (Fulltext Editor) luôn, nhưng ko được. Vì script này chỉ tác dụng với textarea, còn WYS thì lại biến textarea thành DIV để hiển thị hiệu ứng fulltext, mà script này nó ko cho "nhét" dữ liệu vào DIV... Mình đã thử sửa phần getElementsByTagName thành getElementById rồi nhưng vẫn ko được (chạy trên IE nó báo lỗi là ko chấp nhân kiểu truyền dữ liệu).

Vậy mong TG fix code lại cho thích hợp để chèn được vào <DIV> nha. Thanks.

Tra loi

Share BBcode source 2008-11-24 10:22:00

TG có ý kiến nào về việc làm BBcode giống như VBulentin không?
Khi mình nhập vào dạng BBcode rồi thì có 1 button bấm vào thì nó tự động chuyển sang dạng format hoàn chỉnh luôn như là: chữ đậm => <b>chữ đậm</b>

Tra loi

gaulucky92 2008-11-24 10:44:36

VBB nó làm 3 loại editor, tùy thuộc admin quản lí:
- plain-text: chỉ là textarea đơn thuần
- bbcode: textarea với các nút lệnh bbcode. bbcode hiện ra dạng [BBCODE][/BBCODE]
- wysiwyg: cao cấp nhất đây! Đây là cái bạn nói tới :D
Có lẽ bộ wysiwyg của vbb là đã nhất (gọn nhẹ mà đầy đủ). Bạn có thể tìm dc rất nhiều bộ wysiwyg free lẫn fee :D như NicEdit (http://nicedit.com/) có chức năng đơn giản -> free; còn Innova Studio WYSIWYG là bộ editor chuyên nghiệp (tương đương MS WORD, có khi còn hơn ấy chứ), chức năng khủng bố... giá cũng trên trời: 70 USD :D

Tra loi

noob 2009-09-30 01:28:32

cái này có hạn chế là khi in đậm lẩn in nghiên thì con trỏ chuột lại ko đúng yêu cầu. [indam][nghien]Bold[/nghien]
con trỏ chuột nằm ở đây
[/indam] có bác nào biết sửa lổinày hem

Tra loi

KK 2010-04-08 11:26:40

àh còn giờ mình muốn add một Text vào textArea,mà Text này mình load Dữ liệu lên từ DB, dùng nút button để add quan textArea thì làm thế nào và đồng thời mình muốn lưu dữ liệu trong textArea sang một table khác nửa làm sao nhỉ

Tra loi

Y kien