我试图找出如何将普通字符 (ABC) 转换为全 Angular 字符 (ＡＢＣ)。我找不到如何联系你们。我还没有任何 Javascript 代码。这是我的 HTML:
<html>
<head>
</head>
<body>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
<h1>Text convertor 2000</h1>
<textarea placeholder="Text Input" id="textarea_left" spellcheck="false"></textarea>
<textarea placeholder="Text Output" id="textarea_right" spellcheck="false"></textarea>
</body>
</html>
和 css(即使它可能没有用):
body {
background: linear-gradient(270deg, #ffa6ff, #6bffff);
background-size: 200% 200%;
-webkit-animation: backgroundGradient 15s linear infinite;
-moz-animation: backgroundGradient 15s linear infinite;
animation: backgroundGradient 15s linear infinite;
}
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
h1 {
font-family: 'Space Mono', monospace;
font-size: 50px;
margin-left: 640px;
color: #631b87;
-webkit-animation: simpleColorChange 5s ease infinite;
-moz-animation: simpleColorChange 5s ease infinite;
-o-animation: simpleColorChange 5s ease infinite;
animation: simpleColorChange 5s ease infinite;
}
@-webkit-keyframes simpleColorChange {
0% {
color: #6c4df0
}
50% {
color: #b146d4
}
100% {
color: #6c4df0
}
}
@-moz-keyframes simpleColorChange {
0% {
color: #6c4df0
}
50% {
color: #b146d4
}
100% {
color: #6c4df0
}
}
@-o-keyframes simpleColorChange {
0% {
color: #6c4df0
}
50% {
color: #b146d4
}
100% {
color: #6c4df0
}
}
@keyframes simpleColorChange {
0% {
color: #6c4df0
}
50% {
color: #b146d4
}
100% {
color: #6c4df0
}
}
#textarea_left {
margin-left: 280px;
margin-top: 80px;
width: 650px;
height: 550px;
resize: none;
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
font-family: 'Roboto Condensed', sans-serif;
font-size: 25px;
}
#textarea_right {
margin-left: 10px;
margin-top: 80px;
width: 650px;
height: 550px;
resize: none;
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
font-family: 'Roboto Condensed', sans-serif;
font-size: 25px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #585652;
}
::-moz-placeholder { /* Firefox 19+ */
color: #585652;
}
:-ms-input-placeholder { /* IE 10+ */
color: #585652;
}
:-moz-placeholder { /* Firefox 18- */
color: #585652;
}
@-webkit-keyframes backgroundGradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@-moz-keyframes backgroundGradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes backgroundGradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
谢谢。
最佳答案
只需设置 letter-spacing CSS property 的输出 textarea到相对值(如 em )并从输入中复制值 textarea输出 textarea在 input 上事件:
// Get DOM references:
var input = document.getElementById("textarea_left");
var output = document.getElementById("textarea_right");
// Set up an event listener on the input textarea for when it receives input
input.addEventListener("input", function(){
// Set the text of the output textarea to the input textarea's text
output.value = input.value;
});textarea { width:200px; height:200px; }
.input { font-family:Arial, Helvetica, sans-serif; }
/* Setting the letter-spacing to 1em creates a space of the height of
one letter "M" for each character. Change it in decimals to go bigger
or smaller as needed */
.output { font-family:serif; letter-spacing:1em; }<h1>Text convertor 2000</h1>
<textarea placeholder="Text Input" id="textarea_left" spellcheck="false" class="input"></textarea>
<textarea placeholder="Text Output" id="textarea_right" spellcheck="false" class="output"></textarea>关于javascript - 更改字符间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41248921/