Как иметь прозрачные шрифты, кроме «текстового каретки» в текстовой области?

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

textarea {
   background: transparent;
   opacity: 0;
}

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

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


javascript html fonts css caret
person Erik    schedule 17.07.2012    source источник
comment
Вы вообще не сможете увидеть текстовое поле, если установите непрозрачность на 0 ... это даже невозможно ... вам, вероятно, придется сделать какое-то наложение   -  person jeschafe    schedule 17.07.2012
comment
Зачем вам это нужно и что именно вы пытаетесь сделать с этим? Там может быть лучший способ, чем вы делаете это.   -  person Skovy    schedule 17.07.2012
comment
Эрик, я отменил редактирование, потому что ваше недавнее изменение было крайне неясным.   -  person arttronics    schedule 22.07.2012
comment
Я хочу удалить тему, потому что моя проблема неразрешима.   -  person Erik    schedule 22.07.2012
comment
Возможно, у кого-то есть решение. Как насчет этой идеи: поместите ^ в тег span с набором правил CSS, чтобы обеспечить видимость, в то время как остальная часть текст установлен прозрачным?   -  person arttronics    schedule 22.07.2012
comment
Все, что у меня есть, это идеи. Вот еще один: как насчет того, чтобы определить, когда на клавиатуре нажата клавиша ^, и это само по себе позволит увидеть символ вставки. Не надоела эта другая идея.   -  person arttronics    schedule 22.07.2012
comment
Я спонсирую Bounty, чтобы помочь с этим интересным вопросом.   -  person arttronics    schedule 22.07.2012
comment
Какой смысл в редакторе, если вы не видите, что печатаете?   -  person yunzen    schedule 22.07.2012
comment
Я могу прослушивать событие нажатия клавиши и обрабатывать его для своей цели.   -  person Erik    schedule 22.07.2012
comment
арттроник. Спасибо за демонстрацию. Можно ли обрабатывать щелчок мыши для перемещения каретки? Если да, то это то, что мне нужно.   -  person Erik    schedule 23.07.2012
comment
Эрик, да, это возможно. См. Обновление статуса в моем ответе ниже.   -  person arttronics    schedule 30.07.2012

Ответы (4)


arrow_upward
7
arrow_downward

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

Кроме того, этот новый метод jsFiddle, который я создал, обрабатывает эту цель по-разному, но не Подходит для IE8.

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

новый метод jsFiddle!

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

person arttronics    schedule 17.07.2012
comment
Я понимаю, что в текстовой области можно использовать только один цвет шрифта, поэтому, чтобы отобразить карат, что, если вы измените курсор на карат? это решит вопрос? forum.unity3d.com/threads/ - person ph33nyx; 24.07.2012
comment
К сожалению, курсор (или текстовое поле браузера) не сенсорный. - person arttronics; 24.07.2012

arrow_upward
4
arrow_downward

Пришло время вбросить мои 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>

Я подошел к этому так: каждый раз, когда символ вводится в текстовую область «тест», копируйте его в скрытое текстовое поле и заменяйте все символы в «тесте», кроме ^, пробелами. Персонажи скрыты, а карат все еще там. Полный текст находится в другом поле. Вы можете использовать display:hidden вместо display:block, чтобы скрыть его.

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

person evandentremont    schedule 23.07.2012
comment
+1 Спасибо за ответ и уделение этому вопросу должного внимания. Мне очень нравится тот факт, что после просмотра введенного символа он физически больше не может быть выбран текстом. - person arttronics; 24.07.2012

arrow_upward
2
arrow_downward

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

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

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

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

  1. add a hidden label to the page
    • make sure it's hidden and not display: none; (so that it has actual width)
    • установите white-space: nowrap;, чтобы все было в одной строке)
    • убедитесь, что стиль текста точно такой же, как текст в текстовой области
  2. add the element <span id="caret">|</span> right before the textarea (I will refer to this as the caret for the rest of the spec)
    • set its position to position: relative;
    • увеличьте его z-индекс, чтобы сделать его наложенным
    • сдвиньте его вправо, чтобы установить его поверх того места, где будет ФАКТИЧЕСКАЯ исходная позиция каретки
  3. make a function to check take in the value of the textarea and check the width of the textarea against the position of the caret (lookup selectionStart if you don't know how to do this)
    • the problem here is that characters are not always the same length, nor are they always the same length as their counterparts in other fonts
    • to solve this, as text is entered into the textarea you should have it imitated in the hidden label you created in step 1
      • imitate only the text from the start of the textarea to the caret's current position
      • оберните каждый символ (включая пробелы) в свой диапазон
    • next you will have to call a function to compare the width of the label with the width of the textarea
      • if the label is less wide than the textarea, get the width of the last span in the hidden label and shift the caret to the right by that width, then move on to step 4
        • as this is function will be run as text is entered it will happen one character at a time
        • будьте осторожны, чтобы курсор не выходил за пределы текстовой области, когда он находится в своей последней и почти последней позициях
      • if the label is wider than the textarea:
        • add the widths of the characters (spans) in the label one at a time until you reach the width of the textarea
        • сместите положение курсора вниз на высоту шрифта и обратно в исходное горизонтальное положение (поскольку положение курсора относительное, просто измените его левое положение обратно на (0 + offsetToACTUALCaretPosition)
        • используйте флаг (например, class="break"), чтобы отметить последний диапазон (символ) в предыдущей строке
        • call the width comparison function again
          • make sure that you include a condition to check for the flags that you added at the end of each "row" (if any)
  4. если вы еще этого не сделали, примените любые желаемые стили CSS к диапазону курсора и измените цвет текста текстовой области на color: rgba(0,0,0,0);

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

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

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

Удачи!

person Zachary Kniebel    schedule 29.07.2012
comment
+1 Я присудил вам награду, которую я спонсировал, за то, что вы лучше всего справились с основной задачей: Возможно, есть умный способ выполнить эту, казалось бы, невыполнимую задачу. . Ура! - person arttronics; 29.07.2012
comment
Большое спасибо! Я надеюсь, что это поможет или, по крайней мере, спровоцирует некоторые идеи :) - person Zachary Kniebel; 29.07.2012

arrow_upward
-4
arrow_downward

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

person Skovy    schedule 17.07.2012
comment
Использование color:white или color:transparent делает текст невидимым, но я считаю, что каретка не может быть другого цвета, чем текст в текстовой области. - person Skovy; 17.07.2012