1

要素内の奇数の位置にある文字をそのまま維持しながら、偶数の位置にあるすべての文字を垂直方向に反転する必要があります。今、私はこの CSS スタイルを使用しています: -webkit-transform: rotateX(180deg)。ただし、入力要素のテキスト全体を反転します。

他に何をすべきですか？それとも、入力ではなく、別の要素で可能ですか?

4

1 に答える 1

2

現時点では、要素内 (または要素の値内) の文字を選択する方法はありません。理論的には、:nth-letter()疑似要素でうまくいきますが、これは存在しません。

ただし、JavaScript を使用して、入力の値を取得し、文字列を文字spanごとに展開し、要素を各文字でラップし、これらの要素を他のコンテナに入れ、 で変換を行うことができますspan:nth-of-type(even)。

CSS

#container > span {
    display: inline-block;
}
#container > span:nth-of-type(even) {
    color: purple;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

JavaScript

$('#name').keyup(function () {
    'use strict';

    $('#container').empty();
    $(this).val().split('').forEach(function (v) {
        $('#container').append('<span>' + v + '</span>');
    });

});

これを実証するためにjsFiddleを作成しました。

于 2013-07-23T18:27:58.370 に答える