Как найти абсолютную или относительную позицию последней буквы в поле ввода?

Question

Может быть, это странный вопрос. Пожалуйста, отметьте Пыльник, который вы поймете.

Пустой тип ввода текста, ширина = 200px:

[____________________________]

Заполненный тип ввода текста, ширина = 200px:

[abcdefg_____________________]

Если слева введено 0, как найти абсолютную или относительную позицию, где буква g - ???

Когда пользователь вводит какой-то текст, я хочу отобразить под последней буквой простую строку ...

Answer 1

Хаки размера текста в порядке, но вы можете альтернативно использовать visiblity: скрытый диапазон, который перемещает ваш информационный div. Фрагмент HTML-кода следующий:

<div><input type="text" value="hgello!!" onkeydown="document.getElementById('spacer').innerHTML = this.value;" /></div>
<div><span id="spacer" style="visibility: hidden;"></span>Character</div>

Таким образом, вы можете рассчитывать на то, что браузер будет одинаково отображать один и тот же шрифт в промежуток.

Answer 2

Я могу думать только об одном способе надежно сделать это, и это довольно грязно.

1) Используйте редактируемый контент div floated left: 2) окружить этот div с другим с шириной 200, границы и onlick устанавливает фокус на редактируемый div 3) поместите div, который вы хотите показать, после последней буквы после редактируемого div, также плавая влево

Результат: http://jsfiddle.net/tybro0103/zMezP/1/

Нажмите на поле и начните печатать. Зеленое поле будет перемещаться вместе с положением курсора.

Чтобы использовать это как текстовое поле в форме, вам нужно создать скрытое поле ввода. При отправке формы установите значение скрытого поля для внутреннего HTML-файла редактируемого div.

Answer 3

К сожалению, нет встроенного параметра textWidth. Тем не менее, хак, который будет работать довольно хорошо: вы можете посчитать символы, угадать их ширину и установить свой «левый» параметр div равным счетчику * ширина (и убедиться, что он абсолютно позиционирован). что-то вроде:

var characterWidth = 6.8; //have to guess at this until it works...
var targetLocation = document.getElementById('yourInput').value.length * characterWidth;
document.getElementById('yourDiv').style.left = targetLocation + "px";

Запускайте этот скрипт по таймеру, каждые полсекунды или около того (или анимируйте в целевом месте с помощью jquery), и вы должны быть в бизнесе.

Надеюсь, это поможет.

Как уже было отмечено - это будет работать, только если шрифт моноширинный, а пользователь вообще не изменяет размер шрифта.

Answer 4

Вдохновленный ответом tybro, я придумал это, что решает проблему в вашем вопросе.Если текстовое поле имеет фиксированную длину, что произойдет, если последняя буква вообще не видна?О какой координате следует сообщать тогда?В любом случае, это можно обойти, расширив текстовое поле на неопределенное время.

// markup
<div id="textbox">
    <span id="edit" contentEditable></span>
    <span id="end"></span>
</div>
<div id="report">x:? , y:?</div>


// css
#textbox {
    border: solid black 1px;
    min-height: 1em;
    white-space: nowrap;
}


// javascript
$(function() {
    $('#textbox').click(function() {
         $('#edit').focus();
    });

    $('#edit').keypress(function() {
        var endoff = $('#end').offset();
        $('#report').html('x:' + endoff.left + ' , y:' + endoff.top);
    });
});

Единственное, в чем я не уверен, так это когда keypress срабатывает, если происходит изменение содержимого, это проблема.Вы можете обойти это, введя тайм-аут или, возможно, есть даже лучшее решение.К сожалению, событие keyup, похоже, не работает на contentEditable вещах (в любом случае в Firefox 5).

Надеюсь, это поможет.

Answer 5

Я не совсем уверен в этом вопросе, но, по моему мнению, вы могли бы сделать что-то вроде:

var len = 0;
$(document).ready(function(){
    len = $('#input').val().length;
 }

Теперь вы можете добавить число пробелов, равное длине целевого элемента.

Answer 6

1. установить размер шрифта для ввода
2. сделать скриншот ввода с текстом и посмотреть, сколько пикселей используется для 1 символа (в среднем)левый отступ = что хочешь :) простое решение

Answer 7

Единственный способ узнать, как это сделать, - это вычислить ширину буквы, а затем умножить ее на количество букв в вводе.

Или

на дисплее: none div создает ширину ввода атрибутом maxlength для количества символов в текущем вводе. Тогда получите ширину этого.