Có ai biết cách di chuyển dấu nháy bàn phím trong hộp văn bản đến một vị trí cụ thể không?Đặt vị trí dấu ngoặc bàn phím trong hộp văn bản html
Ví dụ: nếu hộp văn bản (ví dụ: phần tử nhập, không phải là vùng văn bản) có 50 ký tự trong đó và tôi muốn định vị dấu mũ trước ký tự 20, tôi sẽ sử dụng nó như thế nào?
Đây là sự khác biệt với câu hỏi này: jQuery Set Cursor Position in Text Area, yêu cầu jQuery.
Trích từ Setting keyboard caret Position in a Textbox or TextArea with Javascript
Một chức năng chung Josh Stodola rằng sẽ cho phép bạn chèn dấu sót tại bất kỳ vị trí của một textbox hoặc textarea mà bạn muốn:
function setCaretPosition(elemId, caretPos) {
var elem = document.getElementById(elemId);
if(elem != null) {
if(elem.createTextRange) {
var range = elem.createTextRange();
range.move('character', caretPos);
range.select();
}
else {
if(elem.selectionStart) {
elem.focus();
elem.setSelectionRange(caretPos, caretPos);
}
else
elem.focus();
}
}
}
Tham số dự kiến đầu tiên là ID của phần tử bạn muốn chèn dấu mũ trên. Nếu yếu tố không thể được tìm thấy, sẽ không có gì xảy ra (rõ ràng). Tham số thứ hai là chỉ số poset caret. Zero sẽ đặt dấu nháy bàn ở đầu. Nếu bạn vượt qua một số lớn hơn số ký tự trong giá trị phần tử, nó sẽ đặt dấu ngoặc kép ở cuối.
Đã kiểm tra trên IE6 trở lên, Firefox 2, Opera 8, Netscape 9, SeaMonkey và Safari. Thật không may trên Safari nó không hoạt động kết hợp với sự kiện onfocus).
Một ví dụ của việc sử dụng các chức năng trên để buộc các caret bàn phím để nhảy đến cuối của tất cả các textareas trên trang khi họ nhận được tập trung:
function addLoadEvent(func) {
if(typeof window.onload != 'function') {
window.onload = func;
}
else {
if(func) {
var oldLoad = window.onload;
window.onload = function() {
if(oldLoad)
oldLoad();
func();
}
}
}
}
// The setCaretPosition function belongs right here!
function setTextAreasOnFocus() {
/***
* This function will force the keyboard caret to be positioned
* at the end of all textareas when they receive focus.
*/
var textAreas = document.getElementsByTagName('textarea');
for(var i = 0; i < textAreas.length; i++) {
textAreas[i].onfocus = function() {
setCaretPosition(this.id, this.value.length);
}
}
textAreas = null;
}
addLoadEvent(setTextAreasOnFocus);
'if (elem.selectionStart)' ngắt khi selectionStart là 0 cũng được chỉ ra bởi câu trả lời của jhnns. – mpartel
Điều này không hiệu quả đối với tôi. Khi tôi nhấp vào hộp văn bản thực tế tôi có thể mong đợi vị trí dấu mũ ở đầu. Hãy xem http://jsfiddle.net/khx2w/ –
hàm setCaretPosition của tôi hoạt động tốt. Tuy nhiên, hàm addActionHandler của bạn thì không. Nhưng ngay cả khi không có điều đó, tôi không thể lấy con trỏ để di chuyển trên tiêu điểm. Rất có thể, đó là do trình duyệt tự đặt vị trí con trỏ dựa trên vị trí của nhấp chuột. Dường như không có cách nào để tránh nó từ những gì tôi có thể nói, nhưng tôi có thể hoàn toàn sai. – GJK
Liên kết trong câu trả lời là bị hỏng, cái này nên công việc (tất cả các khoản tín dụng đi đến blog.vishalon.net):
http://snipplr.com/view/5144/getset-cursor-in-html-textarea/
Trong trường hợp các mã bị mất một lần nữa, đây là hai chức năng chính:
function doGetCaretPosition(ctrl)
{
var CaretPos = 0;
if (ctrl.selectionStart || ctrl.selectionStart == 0)
{// Standard.
CaretPos = ctrl.selectionStart;
}
else if (document.selection)
{// Legacy IE
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart ('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
return (CaretPos);
}
function setCaretPosition(ctrl,pos)
{
if (ctrl.setSelectionRange)
{
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
}
else if (ctrl.createTextRange)
{
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
+1 cho các chức năng cơ bản, mặc dù ** một số điều chỉnh phải được thực hiện **. Số lượng các dòng phải được trừ từ "pos", khi sử dụng phương thức phạm vi. –
function SetCaretEnd(tID) {
tID += "";
if (!tID.startsWith("#")) { tID = "#" + tID; }
$(tID).focus();
var t = $(tID).val();
if (t.length == 0) { return; }
$(tID).val("");
$(tID).val(t);
$(tID).scrollTop($(tID)[0].scrollHeight); }
Loại không bắt buộc Lỗi: Đối tượng [đối tượng HTMLInputElement] không có phương thức 'startsWith' – bobpaul
@bobpaul: 'tID' phải là id của phần tử, không phải là đối tượng phần tử. Nếu bạn đang truyền đối tượng phần tử, bạn chỉ có thể loại bỏ 2 dòng đầu tiên trong phương thức này và nó sẽ hoạt động. – awe
<!DOCTYPE html>
<html>
<head>
<title>set caret position</title>
<script type="application/javascript">
//<![CDATA[
window.onload = function()
{
setCaret(document.getElementById('input1'), 13, 13)
}
function setCaret(el, st, end)
{
if (el.setSelectionRange)
{
el.focus();
el.setSelectionRange(st, end);
}
else
{
if (el.createTextRange)
{
range = el.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', st);
range.select();
}
}
}
//]]>
</script>
</head>
<body>
<textarea id="input1" name="input1" rows="10" cols="30">Happy kittens dancing</textarea>
<p> </p>
</body>
</html>
Tôi đã điều chỉnh câu trả lời của kd7 một chút vì elem.selectionStart sẽ đánh giá false khi selectionStart là tình cờ 0.
function setCaretPosition(elem, caretPos) {
var range;
if (elem.createTextRange) {
range = elem.createTextRange();
range.move('character', caretPos);
range.select();
} else {
elem.focus();
if (elem.selectionStart !== undefined) {
elem.setSelectionRange(caretPos, caretPos);
}
}
}
Kể từ khi tôi thực sự thực sự cần thiết này giải pháp và giải pháp cơ bản điển hình (tập trung đầu vào - sau đó đặt giá trị bằng chính nó) không hoạt động trên trình duyệt chéo, tôi đã dành thời gian chỉnh sửa và chỉnh sửa everythin g để làm cho nó hoạt động. Xây dựng theo mã số @kd7 đây là những gì tôi đã đưa ra.
Tận hưởng!Hoạt động trong IE6 +, Firefox, Chrome, Safari, Opera
Cross-browser caret positioning technique (example: moving the cursor to the END)
// ** USEAGE ** (returns a boolean true/false if it worked or not)
// Parameters (Id_of_element, caretPosition_you_want)
setCaretPosition('IDHERE', 10); // example
Thịt và khoai tây là về cơ bản @kd7 's setCaretPosition, với tinh chỉnh lớn nhất là if (el.selectionStart || el.selectionStart === 0), trong firefox các selectionStart là bắt đầu tại , mà trong boolean tất nhiên là chuyển sang False, do đó, nó đã được phá vỡ ở đó.
Trong chrome vấn đề lớn nhất là chỉ cần cho nó .focus() là không đủ (nó tiếp tục chọn TẤT CẢ các văn bản!) Do đó, chúng tôi thiết lập giá trị của chính nó, cho chính nó el.value = el.value; trước khi gọi chức năng của chúng tôi, và bây giờ nó có nắm bắt vị trí & với đầu vào để sử dụng selectionStart.
function setCaretPosition(elemId, caretPos) {
var el = document.getElementById(elemId);
el.value = el.value;
//^this is used to not only get "focus", but
// to make sure we don't have it everything -selected-
// (it causes an issue in chrome, and having it doesn't hurt any other browser)
if (el !== null) {
if (el.createTextRange) {
var range = el.createTextRange();
range.move('character', caretPos);
range.select();
return true;
}
else {
// (el.selectionStart === 0 added for Firefox bug)
if (el.selectionStart || el.selectionStart === 0) {
el.focus();
el.setSelectionRange(caretPos, caretPos);
return true;
}
else { // fail city, fortunately this never happens (as far as I've tested) :)
el.focus();
return false;
}
}
}
}
Cảm ơn bạn rất nhiều :) –
Bất cứ lúc nào, vui mừng nó nhận được một số sử dụng ở nơi khác! @Mr_Green –
@mcpDESIGNS Tôi đang cố gắng sử dụng chức năng này khi một tiêu điểm được thực hiện trên một đầu vào văn bản, nhưng tôi đang nhận được hư không, Bạn có thể vui lòng giúp đỡ với việc áp dụng chức năng này bằng cách sử dụng javascript tinh khiết? –
Nếu bạn cần phải tập trung một số textbox và vấn đề duy nhất của bạn là toàn bộ văn bản được nhấn mạnh trong khi bạn muốn dấu nháy là lúc kết thúc, sau đó ở chỗ trường hợp cụ thể, bạn có thể sử dụng thủ thuật này thiết lập giá trị textbox để bản thân sau khi tập trung:
$("#myinputfield").focus().val($("#myinputfield").val());
Đây không phải là một bản sao, một yêu cầu jQuery khác không – Isaac
@Isaac tôi đã bỏ phiếu để mở lại này. Hãy nhớ rằng SO có rất nhiều mod nhỏ, những người làm ** không ** quan tâm đến bất cứ điều gì khác hơn là chỉnh sửa mù quáng cho mục đích tự sát. – John