Question

我为div做了一个自定义CSS游标。我试图让它像任何其他标准光标一样显示。这是99％的工作，但当我在字母之间移动时，光标移动其他字母。我相信它可以通过绝对定位来修复，但我想出的任何东西似乎都能正常工作。任何帮助将不胜感激。

    $("#next-btn").click(function() {
      var text = $("#text").text();
      console.log(text);
      var n = text.indexOf("|");
      text = text.replace("|", "");
      text = text.slice(0, n + 1) + '<span id="cursor">|</span>' + text.slice(n + 1);
      $("#text").replaceWith('<span id="text">' + text + '</span>');
    });

    #text {
      desplay: inline;
      font-size: 1.8em;
      letter-spacing: .05em;
    }
    #start,
    #end,
    #cursor {
      padding: 0;
      margin: 0;
    }
    #cursor {
      -webkit-animation: blink 1.5s infinite;
      animation: blink 1.5s infinite;
      font-weight: bold;
      font-size: 1.2em;
    }
    @-webkit-keyframes blink {
      0%, 49.9%, 100% {
        opacity: 0;
      }
      50%,
      99.9% {
        opacity: 1;
      }
    }

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
  <div>
    <span id="text">H<span id="cursor">|</span>ello world</span>
  </div>
  <p>
    <button id="next-btn">Next</button>
  </p>
</body>

</html>

Answer 1

最好的解决方案可能是使用字母间距和边距。使用“position：absolute”可能会使用一些额外的css，但可能会删除沿着字符串的移动。

（根据Roko C. Buljan的建议进行编辑，感谢您的改进）

  letter-spacing: -1em;
  margin: 0 4px 0 -4px;

https://jsfiddle.net/2ozdm8sr/1/

Answer 2

只需使用

position:absolute;
margin:-4px

#cursor元素上的

。这将从文档流中删除它。评论更新，好点。

Answer 3

可能是这样的：

letter-spacing: -10px;

在#cursor上？

Answer 4

    $("#next-btn").click(function() {
      var text = $("#text").text();
      console.log(text);
      var n = text.indexOf("|");
      text = text.replace("|", "");
      text = text.slice(0, n + 1) + '<span id="cursor">|</span>' + text.slice(n + 1);
      $("#text").replaceWith('<span id="text">' + text + '</span>');
    });

    #text {
      desplay: inline;
      font-size: 1.8em;
      letter-spacing: .05em;
    }
    #start,
    #end,
    #cursor {
      padding: 0;
      margin: 0;
margin-left:-6px;
position:absolute;
width:9px;
overflow:hidden;
    }
    #cursor {
      -webkit-animation: blink 1.5s infinite;
      animation: blink 1.5s infinite;
      font-weight: bold;
      font-size: 1.2em;
    }
    @-webkit-keyframes blink {
      0%, 49.9%, 100% {
        opacity: 0;
      }
      50%,
      99.9% {
        opacity: 1;
      }
    }

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
  <div>
    <span id="text">H<span id="cursor">|</span>ello world</span>
  </div>
  <p>
    <button id="next-btn">Next</button>
  </p>
</body>

</html>

Answer 5

我会采用不同的光标方法：使用动画间歇性地转动transparent的{{1}}左边框。这需要首先将文本拆分为包含在跨度中的字符，然后将black类应用于适当的类：

.cursor

var cursor = 0;

$('#text').html( '<span class="cursor">' + $('#text').text().split('').join('</span><span>') + '</span>');

$('#next-btn').on('click', function () {
  
  var $characters = $('#text').children();
  var cursorIndex = $characters.filter('.cursor').index();
  
  if (cursorIndex == -1)
    $characters.eq(0).addClass('cursor');
  else
    $characters.removeClass('cursor').eq(cursorIndex + 1).addClass('cursor');
    
  
});

#text {

  desplay: inline;
  font-size: 1.8em;
  letter-spacing: .005em;

}

#text span {

  border-left: .1em solid transparent;
  
}

#text span.cursor {
  -webkit-animation: blink 1.5s infinite;
  animation: blink 1.5s infinite;
}

@-webkit-keyframes blink {
  0%, 49.9%, 100% {
    border-color: black;
  }
  50%,
  99.9% {
    border-color: transparent;
  }
}

如何保持自定义光标不移动字母？

5 个答案: