有没有办法在html中的contenteditable div中设置插入符号高度

时间:2015-11-17 07:54:42

标签: html css caret

我需要处理像缅甸这样的语言,与英语等其他语言相比,它的字符要大得多。从那时起,它的浏览器计算的行高甚至更大,插入符号的部分位于div边界之外。

所以我需要一种方法来使插入符号在语言与语言之间保持不变。就像你有缅甸语和英语在同一行,并且插入符号将保持从左到右移动50px。或者你可以说我正试图找到一种方法来禁用浏览器计算插入符号高度的默认行为。

顺便说一句,这只涉及到Opera presto,它在chrome或webkit上表现得很好。

1 个答案:

答案 0 :(得分:0)

我认为我没有得到最终的完美解决方案,但它确实是以某种方式解决这个问题的方法。

我使用带有闪烁动画的子div来模拟浏览器的插入符号,并使父亲div成为一个纯粹的div。这是css代码。

这是我认为帮助很多的Github项目。 https://gist.github.com/navinpai/2902229

.cursor {
    width: 1px;
    height: 80px;

    display: block;
    position: relative;
    margin-left: 30px;

    animation-name: see_likes;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-play-state: running;
    animation-delay: 0s;

    -o-animation-name: see_likes;
    -o-animation-duration: 1s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
    -o-animation-play-state: running;
    -o-animation-delay: 0s;
}

@keyframes see_likes {
    0%   { background: #0a0 }
    47%  { background: #090 }
    50%  { background: transparent }
    97%  { background: transparent }
    100% { background: #090 }
}

@-o-keyframes see_likes {
    0%   { background: #0a0 }
    47%  { background: #090 }
    50%  { background: transparent }
    97%  { background: transparent }
    100% { background: #090 }
}