Как иметь прозрачные шрифты, кроме "text-caret" в текстовой области?

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

textarea {
   background: transparent;
   opacity: 0;
}

Когда я печатаю невидимый текст, мне нужно увидеть перемещение по тексту.

EDIT: Мне нужно сделать редактор для редактирования td ячейки в таблице. Когда я нажимаю на ячейку, я показываю текстовое поле и начинаю вводить текст. На каждую букву символа я вставляю контекст в ячейку. После этого я скрываю текстовое поле.

Ответ 1

Этот jsFiddle DEMO использует метод онлайн-обучения, который был слегка изменен для создания non -native browser text-caret вместе с прозрачным текстом.

Кроме того, этот jsFiddle New Method Я создал дескрипторы этой цели по-другому, но не поддерживает IE8.

Обновление статуса: Я улучшил приведенную выше jsFiddle DEMO с помощью этой новой версии под названием:

jsFiddle Новый метод, который более новый!

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

Ответ 2

Время бросить мои $0,02 дюйма.

Это ответ на вопрос, как я понял, это работает, это быстро и грязно, поэтому не стесняйтесь делать предложения. Этот код не проверен, но я создал здесь рабочую скрипту: http://jsfiddle.net/66RXc/

<html>
<head>
<title>Testing</title>
<script type="text/javascript">
<!--


function call(val) {
    document.getElementById('result').value += val.charAt(val.length - 1);


    document.getElementById('result').value = 
        document.getElementById('result').value.substr(0, val.length);


    document.getElementById('test').value = 
        document.getElementById('test').value.replace(/[^\^]/g, ' ');

}
-->
</script>
</head>
<body>

<textarea name="textarea" cols="20" rows="5" id="test"
 onKeyUp="call(this.value);"></textarea>

<textarea style="display:block" cols="20" rows="5" id="result" disabled>
</textarea>

</body>
</html>

То, к чему я обращался, это каждый раз, когда символ вводится в textarea "test", копирует его в скрытое текстовое поле и заменяет все символы в "test", кроме ^ пробелами. Символы скрыты, и карат все еще там. Полный текст по-прежнему находится в другом поле. Вы можете использовать display: hidden вместо display: block, чтобы скрыть его.

Это не совсем лучшая реализация в мире, просто то, что я сделал быстро. Вы должны набрать тип медленного (~ 15-20 WPM), чтобы он работал.

Ответ 3

Вот CSS3-решение для создания самого текста, прозрачного:

Установите для атрибута цвета color: rgba(0,0,0,0); для текста

Единственная проблема заключается в том, что каретка становится невидимой. Я сделал быстрый поиск и узнал, что карет и его стиль полностью находятся в распоряжении браузера. Таким образом, единственный вариант, который я могу придумать для вас, - это использовать Javascript для добавления моделируемого каретки в конец того, что вы печатаете.

У меня есть идея, как это сделать, но это беспорядочно, и я бы точно не назвал его идеальным - я, однако, собираюсь написать его, если он поможет дальнейшей идее другого:

добавить скрытую метку на страницу
- убедитесь, что он скрыт, а не display: none; (так, чтобы он имел фактическую ширину)
- установите white-space: nowrap;, чтобы сохранить все в одной строке)
- убедитесь, что текст оформлен точно так же, как текст в текстовой области
добавьте элемент <span id="caret">|</span> прямо перед текстовым полем (я буду называть это как каретку для остальной части спецификации)
- установите его положение position: relative;
- увеличить свой z-индекс, чтобы сделать его наложением
- сдвиньте его вправо, чтобы установить его поверх того, где начальная позиция ACTUAL будет
сделать функцию, чтобы проверить значение значения в текстовом поле и проверить ширину текстового поля на позицию каретки (выбрать lookStart, если вы не знаете, как это сделать)
- проблема заключается в том, что символы не всегда одинаковой длины и не всегда совпадают с их копиями в других шрифтах.
- чтобы решить эту проблему, так как текст вводится в текстовое поле, оно должно быть имитировано скрытой меткой, созданной на шаге 1
  - имитирует только текст с начала текстового поля в текущую позицию каретки
  - завершать каждый символ (включая пробелы) в своем собственном пространстве
- Далее вам нужно будет вызвать функцию для сравнения ширины метки с шириной текстового поля
  - если метка меньше ширины текстовой области, получите ширину последнего диапазона в скрытой метке и сдвиньте курсор вправо на эту ширину, затем переходите к шагу 4
    - поскольку эта функция будет запущена при вводе текста, это будет происходить по одному символу за раз
    - будьте осторожны, если каретка не выходит за пределы текстового поля, когда она находится в последней и последней последних позициях.
  - если метка шире, чем текстовое поле:
    - добавьте ширину символов (пролетов) в метку по одному, пока не достигнете ширины текстового поля
    - сдвиньте положение каретки на высоту шрифта и вернитесь в горизонтальное исходное положение (поскольку положение каретки относительное, просто измените его левое положение на (0 + offsetToACTUALCaretPosition)
    - используйте флаг (например, class="break"), чтобы пометить последний диапазон (символ) в предыдущей строке
    - снова вызовите функцию сравнения ширины
      - убедитесь, что вы включили условие проверки флажков, которые вы добавили в конце каждой строки (если есть)
Если вы еще этого не сделали, примените любые желаемые стили CSS к диапазону каретки и измените цвет текста textarea на color: rgba(0,0,0,0);

Предостережения:

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

Как я уже говорил, я знаю, что это решение очень грубо, но это может помочь кому-то придумать лучшее.

Удачи!

Ответ 4

На основе вашего редактирования, если вам нужно просто скрыть текстовое поле, почему бы вам не использовать jQuery $('#your_id').hide();