Вопрос по javascript, fonts, html, caret, css – Как получить прозрачные шрифты, кроме текста-каретки в текстовой области?

12

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

textarea {
   background: transparent;
   opacity: 0;
}

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

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

Я хочу удалить тему, потому что моя проблема неразрешима. Erik
Erik, I've rolled back the edit because your recent change was extremely unclear. arttronics
Я спонсирую Баунти, чтобы помочь с этим интересным Вопросом. arttronics
Вы вообще не сможете видеть текстовую область, если установите непрозрачность равной 0 ... это даже невозможно ... вам, вероятно, придется сделать какое-то наложение jeschafe
Зачем вам это нужно и что именно вы пытаетесь сделать с этим? Там может быть лучший способ, чем вы делаете это. Skovy

Ваш Ответ

4   ответа
2

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

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

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

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

add a hidden label to the page make sure it's hidden and not display: none; (so that it has actual width) set white-space: nowrap; to keep it all on one line) make sure the text is styled exactly the same as the text in the textarea 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; increase its z-index to make it overlay shift it right in order to set it on top of where the ACTUAL caret's initial position would be 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 wrap each character (including spaces) in their own span 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 be careful here that the caret doesn't go outside the textarea when it's in its last and near last positions 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 shift the position of the caret down by the height of the font and back to the horizontal starting position (as the caret's position is relative, just change its left position back to (0 + offsetToACTUALCaretPosition) use a flag (e.g. class="break") to mark the last span (character) in the previous row 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) if you haven't already, apply any desired CSS styles to the caret span and change the color of the textarea's text to be color: rgba(0,0,0,0);

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

this will have a lot of overhead for the tiny job it does you will have to adjust this method to account for padding you will have to adjust this method to add support for deleting characters and moving the carets to an earlier position (to the left) if you leave the textarea scrollable, you will have to add support for that (also for similar settings, like static heights causing text to scroll or move off screen/out of the textarea's visible area)

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

Удачи!

Спасибо! Я надеюсь, что это помогает или по крайней мере вызывает некоторые идеи :)
+1 Я наградил награду, которую я спонсировал вам, за то, что она наилучшим образом справилась с основной строкой награды за вознаграждение:Perhaps there is a clever way to achieve this seemly impossible task. Ура!
4

Время бросить мои 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>

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

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

+1 Спасибо за ответ и предоставили этот вопрос с необходимым вниманием. Мне действительно нравится тот факт, что после просмотра напечатанного символа он больше не может быть выделен по тексту.
7

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

Кроме того, этоjsFiddle New Method Я создал эту цель по-разному, но не для IE8.

Status Update:  Я улучшил вышеприведенную демонстрацию jsFiddle с этимnewer версия под названием:

jsFiddle New Method that's Newer!!

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

К сожалению, курсор (или текстовая каретка браузера) не трогается.
Я понимаю, что в текстовой области можно использовать только один цвет шрифта, поэтому, чтобы отобразить карат, что, если вы изменили курсор на карат? это решило бы вопрос?forum.unity3d.com/threads/…
-4

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

С помощьюcolor:white или жеcolor:transparent делает текст невидимым, но я считаю, что каретка не может отличаться от текста в текстовой области.

Похожие вопросы