जवाबों:
मैं IE में इसी मुद्दे (RJS / प्रोटोटाइप के माध्यम से ध्यान केंद्रित करने के बाद) का सामना किया। फ़ायरफ़ॉक्स पहले से ही कर्सर छोड़ रहा था जब क्षेत्र के लिए पहले से ही एक मूल्य है। IE पाठ की शुरुआत में कर्सर को मजबूर कर रहा था।
समाधान मैं इस प्रकार है:
<input id="search" type="text" value="mycurrtext" size="30"
onfocus="this.value = this.value;" name="search"/>यह IE7 और FF3 दोनों में काम करता है
अधिकांश ब्राउज़रों में इसे काम करने का एक सरल तरीका है।
this.selectionStart = this.selectionEnd = this.value.length;हालाँकि, कुछ ब्राउज़रों के * quirks के कारण, अधिक समावेशी उत्तर इस तरह दिखता है
setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);JQuery का उपयोग करना (श्रोता को सेट करने के लिए, लेकिन यह अन्यथा आवश्यक नहीं है)
वेनिला जेएस का उपयोग करना ( इस उत्तरaddEvent से ऋण लेना )
क्रोम में एक अजीब क्विक होता है, जहां फ़ोकस इवेंट कर्सर को फ़ील्ड में ले जाने से पहले आग लगाता है; जो मेरे सरल समाधान शिकंजा। इसे ठीक करने के लिए दो विकल्प:
focusकरने के लिए mouseup। यह तब तक उपयोगकर्ता के लिए बहुत कष्टप्रद होगा जब तक आप अभी तक ध्यान का ध्यान नहीं रखते। मैं वास्तव में इन विकल्पों में से किसी के साथ प्यार में नहीं हूं।इसके अलावा, @vladkras ने बताया कि ओपेरा के कुछ पुराने संस्करणों ने गलत तरीके से लंबाई की गणना की है जब इसमें रिक्त स्थान हैं। इसके लिए आप एक बड़ी संख्या का उपयोग कर सकते हैं जो आपकी स्ट्रिंग से बड़ी होनी चाहिए।
this.selectionStart = this.selectionEnd = 0; यह इनपुट बॉक्स के पहले अक्षर से पहले ध्यान केंद्रित करना चाहिए। लेकिन जब मैंने डिबग किया, तो यह सिलेक्शन और सिलेक्शन के मूल्य को भी नहीं बदल रहा है! और इसे भी पहले किरदार की ओर नहीं बढ़ाया !!
selectionStartऔर lengthरिक्त स्थान पर कम संख्या में लौटने की सूचना दी गई थी । इसलिए मैं 10000इसके बजाय या किसी अन्य बड़ी संख्या का उपयोग करता हूं this.value.length(IE8 और IE11 पर परीक्षण किया गया)
यह कोशिश करो, यह मेरे लिए काम किया है:
//input is the input element
input.focus(); //sets focus to element
var val = this.input.value; //store the value of the element
this.input.value = ''; //clear the value of the element
this.input.value = val; //set that value back. कर्सर को अंत तक ले जाने के लिए, इनपुट पर पहले ध्यान केंद्रित करना होगा, फिर जब मूल्य बदल जाएगा तो यह अंत में मिल जाएगा। यदि आप एक ही .value सेट करते हैं, तो यह क्रोम में नहीं बदलेगा।
this.लाइनों 2, 3, और 4 पर इनपुट के सामने रखा ? हम पहले से ही जानते हैं कि inputइनपुट तत्व है। प्रयोग thisबेमानी लगता है। अच्छा समाधान अन्यथा!
$input.focus().val($input.val());
इस बिट के साथ चारों ओर हैक करने के बाद, मैंने सबसे अच्छा तरीका यह पाया कि setSelectionRangeयदि ब्राउज़र इसका समर्थन करता है, तो फ़ंक्शन का उपयोग करना है; यदि नहीं, तो माइक बैरो के उत्तर में विधि का उपयोग करने से पीछे हटें (अर्थात मूल्य को स्वयं से बदलें)।
मैं उस स्थिति में भी scrollTopउच्च मूल्य पर सेट हो रहा हूं जब हम लंबवत-स्क्रॉल करने योग्य हैं textarea। ( $(this).height()फ़ायरफ़ॉक्स और क्रोम की तुलना में एक उच्च मूल्य का उपयोग करना अधिक विश्वसनीय लगता है ।)
मैंने इसे एक jQuery प्लगइन के रूप में बनाया है। (यदि आप jQuery का उपयोग नहीं कर रहे हैं तो मुझे विश्वास है कि आप अभी भी आसानी से पर्याप्त प्राप्त कर सकते हैं।)
मैंने IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, Opera 10.00 में परीक्षण किया है।
यह putCursorAtEnd प्लगइन के रूप में jquery.com पर उपलब्ध है । आपकी सुविधा के लिए, रिलीज़ 1.0 का कोड निम्नानुसार है:
// jQuery plugin: PutCursorAtEnd 1.0
// http://plugins.jquery.com/project/PutCursorAtEnd
// by teedyay
//
// Puts the cursor at the end of a textbox/ textarea
// codesnippet: 691e18b1-f4f9-41b4-8fe8-bc8ee51b48d4
(function($)
{
jQuery.fn.putCursorAtEnd = function()
{
return this.each(function()
{
$(this).focus()
// If this function exists...
if (this.setSelectionRange)
{
// ... then use it
// (Doesn't work in IE)
// Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
var len = $(this).val().length * 2;
this.setSelectionRange(len, len);
}
else
{
// ... otherwise replace the contents with itself
// (Doesn't work in Google Chrome)
$(this).val($(this).val());
}
// Scroll to the bottom, in case we're in a tall textarea
// (Necessary for Firefox and Google Chrome)
this.scrollTop = 999999;
});
};
})(jQuery);<script type="text/javascript">
function SetEnd(txt) {
if (txt.createTextRange) {
//IE
var FieldRange = txt.createTextRange();
FieldRange.moveStart('character', txt.value.length);
FieldRange.collapse();
FieldRange.select();
}
else {
//Firefox and Opera
txt.focus();
var length = txt.value.length;
txt.setSelectionRange(length, length);
}
}
</script> यह फ़ंक्शन IE9, फ़ायरफ़ॉक्स 6.x और ओपेरा 11.x में मेरे लिए काम करता है
SCRIPT16389: Unspecified error.
मैंने क्रोम में काफी शानदार सफलता के साथ निम्नलिखित की कोशिश की है
$("input.focus").focus(function () {
var val = this.value,
$this = $(this);
$this.val("");
setTimeout(function () {
$this.val(val);
}, 1);
});त्वरित ठहरनेवाला:
यह प्रत्येक इनपुट फ़ील्ड को उस पर फ़ोकस वर्ग के साथ लेता है, फिर इनपुट फ़ील्ड के पुराने मान को एक चर में संग्रहीत करता है, बाद में यह रिक्त स्ट्रिंग को इनपुट फ़ील्ड पर लागू करता है।
फिर यह 1 मील प्रति सेकंड इंतजार करता है और फिर से पुराने मूल्य में डालता है।
यह 2019 है और ऊपर दिए गए तरीकों में से कोई भी मेरे लिए काम नहीं करता है, लेकिन इस एक ने https://css-tricks.com/snippets/javascript/move-cursor-to-end-of-input/ से लिया।
function moveCursorToEnd(id) {
var el = document.getElementById(id)
el.focus()
if (typeof el.selectionStart == "number") {
el.selectionStart = el.selectionEnd = el.value.length;
} else if (typeof el.createTextRange != "undefined") {
var range = el.createTextRange();
range.collapse(false);
range.select();
}
}<input id="myinput" type="text" />
<a href="#" onclick="moveCursorToEnd('myinput')">Move cursor to end</a>el.focus()में else ifतो यह कुछ मामलों में काम नहीं कर रहा था। मैंने इस काम को अब क्रोम में सत्यापित किया और (कंपकंपी) IE
अभी भी मध्यवर्ती चर की जरूरत है, (देखें var val =) अन्यथा कर्सर अजीब व्यवहार करता है, हमें अंत में इसकी आवश्यकता है।
<body onload="document.getElementById('userinput').focus();">
<form>
<input id="userinput" onfocus="var val=this.value; this.value=''; this.value= val;"
class=large type="text" size="10" maxlength="50" value="beans" name="myinput">
</form>
</body>el.setSelectionRange(-1, -1);
https://codesandbox.io/s/peaceful-bash-x2mti
यह विधि एक कॉल में HTMLInputElement.selectionStart, SelectionEnd, और SelectionDirection गुणों को अपडेट करती है।
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
अन्य जेएस विधियों में -1आमतौर पर अंतिम वर्ण का मतलब (से) होता है। इस एक के लिए भी मामला है, लेकिन मैं डॉक्स में इस व्यवहार का स्पष्ट उल्लेख नहीं पा सका।
सभी मामलों के लिए सभी ब्राउज़रों के लिए:
function moveCursorToEnd(el) {
window.setTimeout(function () {
if (typeof el.selectionStart == "number") {
el.selectionStart = el.selectionEnd = el.value.length;
} else if (typeof el.createTextRange != "undefined") {
var range = el.createTextRange();
range.collapse(false);
range.select();
}
}, 1);
}यदि आपको ऑन-फ़ोकस ईवेंट हैंडलर से कर्सर ले जाने की आवश्यकता है, तो टाइमआउट आवश्यक है
मुझे स्वीकृत उत्तर बहुत पसंद हैं, लेकिन इसने क्रोम में काम करना बंद कर दिया। क्रोम में, कर्सर को अंत तक जाने के लिए, इनपुट मूल्य को बदलना होगा। समाधान इस प्रकार है:
<input id="search" type="text" value="mycurrtext" size="30"
onfocus="var value = this.value; this.value = null; this.value = value;" name="search"/>यह समस्या दिलचस्प है। इसके बारे में सबसे भ्रामक बात यह है कि मैंने जो कोई समाधान नहीं पाया वह समस्या को पूरी तरह हल कर दिया।
++++++++ SOLUTION ++++++++
आपको इस तरह से JS फ़ंक्शन की आवश्यकता है:
function moveCursorToEnd(obj) {
if (!(obj.updating)) {
obj.updating = true;
var oldValue = obj.value;
obj.value = '';
setTimeout(function(){ obj.value = oldValue; obj.updating = false; }, 100);
}
}आपको इस आदमी को ऑनफोकस और ऑनक्लिक घटनाओं में कॉल करने की आवश्यकता है।
<input type="text" value="Test Field" onfocus="moveCursorToEnd(this)" onclick="moveCursorToEnd(this)">यह सभी उपकरणों पर काम करता है !!!!
var valsrch = $('#search').val();
$('#search').val('').focus().val(valsrch);हालांकि यह बहुत सारे उत्तरों के साथ एक पुराना प्रश्न हो सकता है, मैं एक समान मुद्दे पर भाग गया और कोई भी उत्तर मुझे पसंद नहीं था और / या खराब तरीके से समझाया गया था। चयनस्टार्ट और चयन गुणों के साथ मुद्दा यह है कि वे इनपुट प्रकार संख्या के लिए मौजूद नहीं हैं (जबकि पाठ प्रकार के लिए प्रश्न पूछा गया था, मुझे लगता है कि यह उन अन्य लोगों की मदद कर सकता है जिनके पास अन्य इनपुट प्रकार हो सकते हैं जिन्हें उन्हें ध्यान केंद्रित करने की आवश्यकता है)। इसलिए यदि आप नहीं जानते कि इनपुट प्रकार फलन पर ध्यान केंद्रित करेगा या नहीं, तो आप उस समाधान का उपयोग नहीं कर सकते।
वह समाधान जो क्रॉस ब्राउज़र का काम करता है और सभी इनपुट प्रकारों के लिए सरल है:
इस तरह से इनपुट तत्व के अंत में कर्सर होता है।
तो आप सब कुछ इस तरह से करेंगे (jquery का उपयोग करते हुए, तत्व चयनकर्ता को प्रदान किया जाना चाहिए कि जिस पर ध्यान केंद्रित करना है वह क्लिक किए गए तत्व के 'डेटा-फ़ोकस-तत्व' डेटा विशेषता के माध्यम से सुलभ है और फ़ंक्शन '.foo' पर क्लिक करने के बाद निष्पादित होता है। तत्व):
$('.foo').click(function() {
element_selector = $(this).attr('data-focus-element');
$focus = $(element_selector);
value = $focus.val();
$focus.focus();
$focus.val(value);
});यह काम क्यों करता है? बस, जब .focus () कहा जाता है, तो इनपुट तत्व की शुरुआत में फोकस जोड़ा जाएगा (जो कि यहां की मुख्य समस्या है), इस तथ्य की अनदेखी करते हुए, कि इनपुट तत्व का पहले से ही इसमें एक मूल्य है। हालांकि, जब किसी इनपुट का मूल्य बदला जाता है, तो कर्सर स्वचालित रूप से इनपुट तत्व के अंदर मूल्य के अंत में रखा जाता है। इसलिए यदि आप उसी मान के साथ मूल्य को ओवरराइड करते हैं जो पहले इनपुट में दर्ज किया गया था, तो मूल्य अछूता दिखेगा, कर्सर, हालांकि, अंत तक चलेगा।
कोशिश करें कि यह वैनिला जावास्क्रिप्ट के साथ काम करे।
<input type="text" id="yourId" onfocus=" let value = this.value; this.value = null; this.value=value" name="nameYouWant" class="yourClass" value="yourValue" placeholder="yourPlaceholder...">जेएस में
document.getElementById("yourId").focus()पाठ के अंत में पाठ क्षेत्र पर क्लिक करने पर कर्सर सेट करें ... इस कोड का भिन्न रूप है ... ALSO काम करता है! फ़ायरफ़ॉक्स, IE, सफारी, क्रोम के लिए ..
सर्वर-साइड कोड में:
txtAddNoteMessage.Attributes.Add("onClick", "sendCursorToEnd('" & txtAddNoteMessage.ClientID & "');")जावास्क्रिप्ट में:
function sendCursorToEnd(obj) {
var value = $(obj).val(); //store the value of the element
var message = "";
if (value != "") {
message = value + "\n";
};
$(obj).focus().val(message);
$(obj).unbind();
}यदि आप पहले मूल्य निर्धारित करते हैं और फिर फोकस सेट करते हैं, तो कर्सर हमेशा अंत में दिखाई देगा।
$("#search-button").click(function (event) {
event.preventDefault();
$('#textbox').val('this');
$("#textbox").focus();
return false;
});यहाँ https://jsfiddle.net/5on50caf/1/ का परीक्षण करना है।
मैं एक "div" तत्व के अंत में कर्सर रखना चाहता था जहां संतोषप्रद = सत्य हो, और मुझे Xeonbross कोड के साथ एक समाधान मिला :
<input type="button" value="Paste HTML" onclick="document.getElementById('test').focus(); pasteHtmlAtCaret('<b>INSERTED</b>'); ">
<div id="test" contenteditable="true">
Here is some nice text
</div>और यह कार्य जादू करते हैं:
function pasteHtmlAtCaret(html) {
var sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// non-standard and not supported in all browsers (IE9, for one)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) ) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}अधिकांश ब्राउज़रों के लिए ठीक काम करता है, कृपया इसे जांचें, यह कोड टेक्स्ट डालता है और टेक्स्ट को div एलिमेंट (इनपुट तत्व नहीं) के अंत में फोकस करता है
https://jsfiddle.net/Xeoncross/4tUDk/
धन्यवाद, एक्सोनक्रॉस
मैंने भी उसी समस्या का सामना किया। अंत में यह मेरे लिए काम करने वाला है:
jQuery.fn.putCursorAtEnd = = function() {
return this.each(function() {
// Cache references
var $el = $(this),
el = this;
// Only focus if input isn't already
if (!$el.is(":focus")) {
$el.focus();
}
// If this function exists... (IE 9+)
if (el.setSelectionRange) {
// Double the length because Opera is inconsistent about whether a carriage return is one character or two.
var len = $el.val().length * 2;
// Timeout seems to be required for Blink
setTimeout(function() {
el.setSelectionRange(len, len);
}, 1);
} else {
// As a fallback, replace the contents with itself
// Doesn't work in Chrome, but Chrome supports setSelectionRange
$el.val($el.val());
}
// Scroll to the bottom, in case we're in a tall textarea
// (Necessary for Firefox and Chrome)
this.scrollTop = 999999;
});
};इसे हम इस प्रकार कह सकते हैं:
var searchInput = $("#searchInputOrTextarea");
searchInput
.putCursorAtEnd() // should be chainable
.on("focus", function() { // could be on any event
searchInput.putCursorAtEnd()
});यह मेरे लिए सफारी, IE, क्रोम, मोज़िला में काम करता है। मोबाइल उपकरणों पर मैंने यह कोशिश नहीं की।
//fn setCurPosition
$.fn.setCurPosition = function(pos) {
this.focus();
this.each(function(index, elem) {
if (elem.setSelectionRange) {
elem.setSelectionRange(pos, pos);
} else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
});
return this;
};
// USAGE - Set Cursor ends
$('#str1').setCurPosition($('#str1').val().length);
// USAGE - Set Cursor at 7 position
// $('#str2').setCurPosition(7);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Set cursor at any position</p>
<p><input type="text" id="str1" value="my string here" /></p>
<p><input type="text" id="str2" value="my string here" /></p>मैंने पहले सुझावों की कोशिश की लेकिन किसी ने मेरे लिए काम नहीं किया (उन्हें क्रोम में परीक्षण किया गया), इसलिए मैंने अपना कोड लिखा - और यह फ़ायरफ़ॉक्स, IE, सफारी, क्रोम में ठीक काम करता है ...
टेक्सारिया में:
onfocus() = sendCursorToEnd(this);जावास्क्रिप्ट में:
function sendCursorToEnd(obj) {
var value = obj.value; //store the value of the element
var message = "";
if (value != "") {
message = value + "\n";
};
$(obj).focus().val(message);}यहाँ मेरे जवाब का jsField डेमो है। डेमो कॉफीस्क्रिप्ट का उपयोग करता है, लेकिन आप इसे सादे जावास्क्रिप्ट में बदल सकते हैं यदि आपको आवश्यकता है तो आप ।
जावास्क्रिप्ट में महत्वपूर्ण हिस्सा:
var endIndex = textField.value.length;
if (textField.setSelectionRange) {
textField.setSelectionRange(endIndex, endIndex);
}मैं इस उत्तर को पोस्ट कर रहा हूं क्योंकि मैंने पहले ही इसे किसी और के लिए लिखा था, जिसका प्रश्न समान था। यह उत्तर शीर्ष के रूप में कई किनारे के मामलों को कवर नहीं करता है क्योंकि यहाँ शीर्ष उत्तर हैं, लेकिन यह मेरे लिए काम करता है, और इसमें एक jsField डेमो है जिसके साथ आप खेल सकते हैं।
यहाँ jsFiddle से कोड है, इसलिए यदि jsField गायब हो जाता है तो भी यह उत्तर सुरक्षित है:
moveCursorToEnd = (textField) ->
endIndex = textField.value.length
if textField.setSelectionRange
textField.setSelectionRange(endIndex, endIndex)
jQuery ->
$('.that-field').on 'click', ->
moveCursorToEnd(this)<div class="field">
<label for="pressure">Blood pressure</label>:
<input class="that-field" type="text" name="pressure" id="pressure" value="24">
</div>
<p>
Try clicking in the text field. The cursor will always jump to the end.
</p>body {
margin: 1em;
}
.field {
margin-bottom: 1em;
}निम्नलिखित कोड आज़माएं:
$('input').focus(function () {
$(this).val($(this).val());
}).focus()setSelectionRangeदृष्टिकोण निश्चित रूप से और अधिक कुशल जब / जहां समर्थित है।
हालांकि मैं बहुत देर से जवाब दे रहा हूं, लेकिन भविष्य में क्वेरी के लिए यह मददगार होगा। और यह contenteditablediv में भी काम करता है ।
जहां से आपको अंत में ध्यान केंद्रित करने की आवश्यकता है; इस कोड को लिखें-
var el = document.getElementById("your_element_id");
placeCaretAtEnd(el);और समारोह है -
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}