Cursor ไปใว้หลังสุดตัวอักษร
25 ก.ค. 2018 , 2,350 Views , หมวดหมู่ jQuery,JavaScript,Ajax ทุกหมวดหมู่ โค๊ดดิ้ง , ป้ายกำกับ:Cursor
เช่น กรณีเราพิมพ์ข้อความแล้วกด Submit ค้นหา พอรีโหลดกลับมาให้ Cursor อยู่หลังคำค้นหา เพื่อที่จะพิมพ์ต่อได้เลย เป็นต้น
ตัวอย่างโค๊ด
สร้างฟังค์ชันใว้ใช้งาน
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
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; }); }; |
ใช้งาน
|
1 2 3 4 5 6 7 |
var searchInput = $("#keyword"); searchInput .putCursorAtEnd() // should be chainable .on("focus", function() { // could be on any event searchInput.putCursorAtEnd() }); |
ดูเพิ่มเติม https://gist.github.com/ControlledChaos/210c669650b787651809e4e0a97dd78b
ป้ายกำกับ:Cursor
