如何在输入元素的偶数位置垂直翻转所有字母？ [英] How to flip vertically all the letter at even positions in input element?

问题描述

我需要垂直翻转偶数位置的所有字母，同时在元素中保持奇数位置的字母完整。现在我使用这种CSS样式： -webkit-transform：rotateX（180deg）。但它翻转输入元素中的整个文本。

I need to flip vertically all the letter at even positions while keeping the letters at the odd positions intact in element. Now I'm using this css style: -webkit-transform: rotateX(180deg). But it flips the whole text in input element.

我应该怎么办？

推荐答案

此时，没有办法选择字母元素（或在元素的值内）。理论上，一个：nth-​​letter（）伪元素将会做到这一点，但这不存在。

At this time, there is no way to select the letters within an element (or within the value of an element). Theoretically, a :nth-letter() pseudo-element would do the trick, but this doesn't exist.

然而，你可以使用JavaScript来获取输入的值，按字符分解字符串，在每个字符周围包裹 span ，将这些元素放入其他容器中，在 span：nth-​​of-type（even）上进行转换。

You can however use JavaScript to take the value of the input, explode the string by character, wrap span elements around each character, put these elements into some other container, and do the transformation on span:nth-of-type(even).

#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

JavaScript

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

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

});

我做了一个 jsFiddle 来演示这一点。

I've made a jsFiddle to demonstrate this.

这篇关于如何在输入元素的偶数位置垂直翻转所有字母？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！