Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > Смещение курсора input text


Автор: Bandit 5.1.2010, 14:15
Доброго времени суток форумчанам.
Есть вопрос который требует решения.
Допустим есть input type=text

в него помещаються значения выбранные пользователем из какого-нибудь списка(не суть важно), например список email-ов.

поле импут начинает выглядеть так(приблизетельно smile ) :mail1@mail.ru, mail2@mail.ru, mail3@mail.ru, mail4@mail.ru,   

проблема:
Само собой, что видимость(длинна) поля ограничена, т.е. при выборе пользователем еще одного значения(например): mail5@mail.ru,   
поле выглядит уже так:
|mail1@mail.ru, mail2@mail.ru, mail3@mail.ru, mail4@mail.ru, mail5@m| <- тут конец "видимости"(не знаю как назвать) поля ввода

необходимо, что бы курсор сдвигался в конец поля и отображалось введенное значение, т.е. :
вместо:
|mail1@mail.ru, mail2@mail.ru, mail3@mail.ru, mail4@mail.ru, mail5@m|
|mail.ru, mail2@mail.ru, mail3@mail.ru, mail4@mail.ru, mail5@mail.ru, |

как это сделать? Надеюсь объяснил понятно smile

Автор: Bandit 5.1.2010, 16:06
Хорошо. Поставим вопрос по другому))
Возможно ли такое сделать?
Реализовал сдвиг курсора в право, но input text не "прокручивается", т.е. курсор сдвинуся, но видимость его отсутсвует. он за краем поля видимого пользователем. если я начинаю вводить, что-нибудь еще в это поле, то вид смещаеться к курсору(именно это мне и надо, но без участия юзера).

Помогите кто чем может  smile 

Автор: Amphiluke 5.1.2010, 16:38
Могу предложить вам только обмануть пользователя. smile Не лучший выход, но другого пока не вижу.
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
    #mails {
        background: #FFFFFF;
        font-family: inherit;
        height: 19px;
        overflow: hidden;
        width: 150px;
    }
</style>
<script type="text/javascript">
    function addAndshift(sender) {
        var txt = document.getElementById("mails");
        txt.value += sender.options[sender.selectedIndex].text + ", ";
        txt.focus();
        txt.scrollLeft = txt.scrollWidth;
    }
</script>
</head>

<body>
    <form action="#">
        <textarea cols="50" rows="1" id="mails" wrap="off"></textarea><br />
        <select multiple="multiple" size="10" onchange="addAndshift(this);">
            <option value="mail1">mail1@mail.ru</option>
            <option value="mail2">mail2@mail.ru</option>
            <option value="mail3">mail3@mail.ru</option>
            <option value="mail4">mail4@mail.ru</option>
            <option value="mail5">mail5@mail.ru</option>
            <option value="mail6">mail6@mail.ru</option>
            <option value="mail7">mail7@mail.ru</option>
            <option value="mail8">mail8@mail.ru</option>
        </select>
    </form>

</body>
</html>


Добавлено через 7 минут и 13 секунд
Кстати, IE позволяет делать это и с input. Я имею в виду установку scrollLeft.

Добавлено через 12 минут и 31 секунду
А нажатие Enter'ов можно отлавливать и пресекать…

Автор: Bandit 5.1.2010, 17:31
Amphiluke,  спасибо огромное!
Чудесное решение наболевшей проблемы!
Благодарю!  smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)