jQuery: прокрутите textarea до заданной позиции
у меня есть textarea с большим количеством текста:
<textarea cols="50" rows="10" id="txt">lots and lots of text goes here</textarea>
Я хочу прокрутить текстовую область вниз, чтобы пользователь мог видеть 2000-й символ. Как это сделать с помощью javasctipt / jQuery?
$('#txt').scrollToCharNo(2000); // something like this would be great
EDIT (мое решение)
Ну, мне удалось заставить его работать на себя. Единственный способ, который я нашел, - создать DIV с тем же шрифтом и шириной, что и textarea, поместить промежуток рядом с нужным символом и найти положение этого промежутка.
Я уверен, что кто-то может найти мое решение полезным, поэтому я вставлю его здесь:
jQuery.fn.scrollToText = function(search) {
// getting given textarea contents
var text = $(this).text();
// number of charecter we want to show
var charNo = text.indexOf(search);
// this SPAN will allow up to determine given charecter position
var anch = '<span id="anch"></span>';
// inserting it after the character into the text
text = text.substring(0, charNo) + anch + text.substring(charNo);
// creating a DIV that is an exact copy of textarea
var copyDiv = $('<div></div>')
.append(text.replace(/n/g, '<br />')) // making newlines look the same
.css('width', $(this).attr('clientWidth')) // width without scrollbar
.css('font-size', $(this).css('font-size'))
.css('font-family', $(this).css('font-family'))
.css('padding', $(this).css('padding'));
// inserting new div after textarea - this is needed beacuse .position() wont work on invisible elements
copyDiv.insertAfter($(this));
// what is the position on SPAN relative to parent DIV?
var pos = copyDiv.find('SPAN#anch').offset().top - copyDiv.find('SPAN#anch').closest('DIV').offset().top;
// the text we are interested in should be at the middle of textearea when scrolling is done
pos = pos - Math.round($(this).attr('clientHeight') / 2);
// now, we know where to scroll!
$(this).scrollTop(pos);
// no need for DIV anymore
copyDiv.remove();
};
$(function (){
$('#scroll_button').click(
function() {
// scrolling to "FIND ME" using function written above
$('#txt').scrollToText('FIND ME');
return false;
}
);
});
вот демо (он работает!): http://jsfiddle.net/KrVJP/
Так как ни один из ответов на самом деле не решил проблему, я приму experimentX один: Спасибо, что приложили усилия, чтобы помочь мне, я ценю это!
2 ответов
Я не уверен, что это сработает. Пожалуйста, проверьте это здесь. Кажется, он работает для 2000-й, 1500-й и 1000-й позиции.
редактировать смущает размер шрифта и высота строки ???
$(function (){
var height = 2000/$('#txt').attr('cols');
$('#txt').scrollTop(height*13);
$('#txt').selectRange(2000,2000); //this is just to check
});
$.fn.selectRange = function(start, end) { //this is just to check
return this.each(function() {
if (this.setSelectionRange) {
this.focus();
this.setSelectionRange(start, end);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
});
};
обновление как насчет этого
var height = 1200/$('#txt').attr('cols');
var line_ht = $('#txt').css('line-height');
line_ht = line_ht.replace('px','');
height = height*line_ht;