2008-09-10 49 views
10

Tôi muốn chèn một số ký tự đặc biệt vào dấu mũ bên trong hộp văn bản bằng cách sử dụng javascript trên một nút. Điều này có thể giải quyết như thế nào?Làm cách nào để chèn ký tự vào dấu mũ bằng javascript?

Tập lệnh cần tìm hộp văn bản đang hoạt động và chèn ký tự vào dấu mũ trong hộp văn bản đó. Kịch bản cũng cần phải làm việc trong IE và Firefox.

EDIT: Bạn cũng có thể chèn ký tự "cuối cùng" trong hộp văn bản hoạt động trước đó.

Trả lời

1

Lưu ý rằng nếu người dùng nhấn nút, tiêu điểm trên hộp văn bản sẽ bị mất và sẽ không có vị trí dấu mũ!

+0

Tôi không chắc chắn những gì bạn đang cố gắng để nói. Như ví dụ của tôi cho thấy, bạn có thể lấy vị trí con trỏ ngay cả từ một phần tử không có tiêu điểm. – bmb

0

vòng lặp qua tất cả các bạn lĩnh vực đầu vào ... tìm một trong đó có tập trung .. sau đó một khi bạn có vùng văn bản của bạn ... bạn sẽ có thể làm điều gì đó giống như ...

myTextArea .value = 'văn bản để chèn vào vùng văn bản ở đây';

0

Tôi không chắc chắn bạn có thể chụp vị trí dấu mũ hay không, nhưng nếu có thể, bạn có thể tránh mối quan tâm của Jason Cohen bằng cách chụp vị trí (liên quan đến chuỗi) bằng sự kiện onblur của hộp văn bản.

1

Trong ánh sáng của bản cập nhật của bạn:

var inputs = document.getElementsByTagName('input'); 
var lastTextBox = null; 

for(var i = 0; i < inputs.length; i++) 
{ 
    if(inputs[i].getAttribute('type') == 'text') 
    { 
    inputs[i].onfocus = function() { 
     lastTextBox = this; 
    } 
    } 
} 

var button = document.getElementById("YOURBUTTONID"); 
button.onclick = function() { 
    lastTextBox.value += 'PUTYOURTEXTHERE'; 
} 
3

Tôi nghĩ Jason Cohen là không chính xác. Vị trí dấu mũ được giữ nguyên khi tiêu điểm bị mất.

[Sửa: Thêm mã cho FireFox mà tôi không có ban đầu.]

[Sửa:. Nhập mã để xác định hộp văn bản hoạt động gần đây nhất]

Trước tiên, bạn có thể sử dụng sự kiện onBlur của mỗi hộp văn bản để đặt biến thành "this" để bạn luôn biết hộp văn bản hoạt động gần đây nhất.

Sau đó, có cách IE để có được vị trí con trỏ cũng hoạt động trong Opera và một cách dễ dàng hơn trong Firefox.

Trong IE khái niệm cơ bản là sử dụng các đối tượng document.selection và đặt một số văn bản vào vùng chọn. Sau đó, bằng cách sử dụng indexOf, bạn có thể nhận được vị trí của văn bản bạn đã thêm vào.

Trong FireFox, có một phương thức gọi là selectionStart sẽ cung cấp cho bạn vị trí con trỏ.

Một khi bạn có vị trí con trỏ, bạn ghi đè lên toàn bộ text.value với

văn bản trước khi vị trí con trỏ + văn bản mà bạn muốn chèn + các văn bản sau khi vị trí con trỏ

Dưới đây là một ví dụ với các liên kết riêng cho IE và FireFox. Bạn có thể sử dụng phương pháp phát hiện trình duyệt ưa thích để tìm ra mã nào để chạy.

<html><head></head><body> 

<script language="JavaScript"> 
<!-- 

var lasttext; 

function doinsert_ie() { 
    var oldtext = lasttext.value; 
    var marker = "##MARKER##"; 
    lasttext.focus(); 
    var sel = document.selection.createRange(); 
    sel.text = marker; 
    var tmptext = lasttext.value; 
    var curpos = tmptext.indexOf(marker); 
    pretext = oldtext.substring(0,curpos); 
    posttest = oldtext.substring(curpos,oldtext.length); 
    lasttext.value = pretext + "|" + posttest; 
} 

function doinsert_ff() { 
    var oldtext = lasttext.value; 
    var curpos = lasttext.selectionStart; 
    pretext = oldtext.substring(0,curpos); 
    posttest = oldtext.substring(curpos,oldtext.length); 
    lasttext.value = pretext + "|" + posttest; 
} 

--> 
</script> 


<form name="testform"> 
<input type="text" name="testtext1" onBlur="lasttext=this;"> 
<input type="text" name="testtext2" onBlur="lasttext=this;"> 
<input type="text" name="testtext3" onBlur="lasttext=this;"> 

</form> 
<a href="#" onClick="doinsert_ie();">Insert IE</a> 
<br> 
<a href="#" onClick="doinsert_ff();">Insert FF</a> 
</body></html> 

Điều này cũng sẽ hoạt động với văn bản. Tôi không biết cách định vị lại con trỏ để nó vẫn ở điểm chèn.

+0

Trong FF 4, điều này có thể được thực hiện với 'elem.setSelectionRange (từ, đến)' và sử dụng cùng một giá trị cho 'from' và 'to', bạn có thể sử dụng curpos var + chiều dài của chuỗi được chèn vào như sau: ' elem.setSelectionRange (curpos + newstring.length, curpos + newstring.length) 'giả sử newstring được sử dụng thay cho đường ống. Tôi không biết làm thế nào để đạt được điều này trong IE mặc dù ... Và tôi đã không thử nghiệm này trên bất kỳ trình duyệt khác ... – Flatline

0

Một phiên bản chặt ra từng khúc mã @bmb trong câu trả lời trước đó hoạt động tốt để định vị con trỏ ở cuối của các nhân vật chèn quá:

var lasttext; 

function doinsert_ie() { 
var ttInsert = "bla"; 
lasttext.focus(); 
var sel = document.selection.createRange(); 
sel.text = ttInsert; 
sel.select(); 
} 

function doinsert_ff() { 
var oldtext = lasttext.value; 
var curposS = lasttext.selectionStart; 
var curposF = lasttext.selectionEnd; 
pretext = oldtext.substring(0,curposS); 
posttest = oldtext.substring(curposF,oldtext.length); 
var ttInsert='bla'; 
lasttext.value = pretext + ttInsert + posttest; 
lasttext.selectionStart=curposS+ttInsert.length; 
lasttext.selectionEnd=curposS+ttInsert.length; 
} 
Các vấn đề liên quan