Как скрыть каретку при вводе текста HTML, когда непрозрачность равна нулю? (IE), - PullRequest
Новая
       17

Как скрыть каретку при вводе текста HTML, когда непрозрачность равна нулю? (IE),

2 голосов
/ 23 февраля 2012

Ситуация

Этот вопрос задавался ранее, но я никогда не видел хорошего решения.Сначала я объясню свою ситуацию, поэтому сначала прочитайте, так как я уже знаю, что вы хотите спросить: «Зачем вы это делаете?» ..

У меня есть div поверх ввода.Я сделал подгонку входного содержимого, как и div.Таким образом, ширина всегда точно соответствует ширине самого текста.(Использовал javascript: Math.max(offsetWidth, scrollWidth))

Я делаю это, очевидно, потому что я хотел бы иметь свой собственный объект ввода.Но так как вы не можете использовать html при вводе, у меня есть этот div-слой поверх него, поэтому я более гибок.Но мне все еще нужен ввод под ним, потому что почти невозможно щелкнуть и выделить текст в элементе div и получить от мыши координаты хорошей позиции каретки.Таким образом, я поместил ввод поверх div, но сделал его opacity = 0.Это дает мне хорошую невидимость, но все же возможность правильно фокусировать ввод.

Проблема

В IE (я тестировал только IE8) каретка из элемента ввода HTML всегда видна даже при непрозрачностиустановить на ноль.

Вопрос

Учитывая ограничения из Ситуации - поэтому ввод должен быть редактируемым и видимым, но с непрозрачностью до нуля - Как я могу скрыть каретку от элемента ввода HTML дляв каждом браузере, даже если непрозрачность установлена ​​на ноль?

Пробный код

jsFiddle 

<?xml version="1.0" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
*
{
    padding: 0px;
    margin: 0px;
    position: relative;
}
html, body
{
    width: 100%;
    height: 100%;
}
.hidden_input
{
    -moz-opacity: 0.2;
    opacity: 0.2;
    filter: alpha(opacity=20);
    float: left;
}
.visible_output
{
    position: absolute;
    float: left;
    white-space: pre;
}
</style>
</head>
<body>
<input type="text" id="in" onkeyup="document.getElementById('out').innerHTML=this.value;" class="hidden_input" />
<div id="out" class="visible_output"></div>
</body>
</html>

Обратите внимание, что есть некоторыепроблемы с пространством, и ввод не подходит к содержанию, но это не является частью вопроса здесь.Также для большей ясности я установил непрозрачность ввода вместо 0,4. Это должно легко продемонстрировать, как каретка в FF становится полупрозрачной, но в IE она остается полностью непрозрачной.

Ответы [ 2 ]

3 голосов
/ 02 ноября 2012 
<script>
$('div').mouseup(function(){
    $(this).blur()
})
</script>
<div contenteditable='true'></div>
0 голосов
/ 24 февраля 2012

Хорошо, после того, как я закончил, я действительно хотел получить ответ. Так что на самом деле я нашел идеальное решение своей проблемы. Не очень хорошее и прямое решение, а скорее обходной путь, который работает в моей конкретной ситуации.

Решение заключается в том, что каретка НЕ ​​отображается в IE, когда она находится в переполнении элемента, а переполнение установлено на скрытый. Таким образом, если у вас есть: 

<div style="overflow: hidden;position: relative;">
    <input type="text" style="position: absolute;top: -30px;" />
</div>

Если на входе есть фокус (путем переключения между фокусируемыми элементами), вы увидите, что каретка не отображается. Таким образом, решение состоит в том, чтобы сделать элемент ввода, например, height: 60px; и установить top: -30px;. Теперь вы все еще можете нажать на невидимый ввод, но каретка скрывается где-то в переполнении.

Но теперь возникает новая проблема. Вы не можете выделить текст на входе, если вы не выделяете его в самой строке. Итак, мне пришлось сделать немного неприятный javascript в нем, чтобы, если я сделаю onmousedown на входе, входная информация изменится на top: 0px;height: 30px;, и наоборот на событие onmouseup. Это можно сделать безопасно, так как при выделении текста никакой каретки не существует.

Я протестировал это решение как в FF, так и в IE8, и теперь все работает отлично. Теперь я выложил все это в Интернете: https://jsfiddle.net/90L5jme6/. Вы можете увидеть, как работает механизм выбора, установив непрозрачность входа на 0,2 и установив видимый переполнение контейнера ввода.

...