Question

我试图找出如何将普通字符（ABC）转换为全角字符（ABC）。我无法找到接触你们的方式。我还没有任何Javascript代码。这是我的HTML：

    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%;
  }
}

和css（即使它可能没用）：

<?php
require "Common.php";
$player_username = $_POST ["usernamePost"];
$player_password = $_POST ["passwordPost"];
$hashed_password = password_hash($player_password, PASSWORD_DEFAULT);

$conn = new mysqli ($server_host, $server_username, $server_password, $server_dbName);

$result = mysqli_query ($conn, "SELECT * FROM users WHERE Username ='$player_username' and Password = ''");
$count = mysqli_num_rows($result);

if ($count == 1) {
    while ($row = mysqli_fetch_assoc ($result)) {
        if (password_verify($player_password, $hashed_password)) {
            echo "Signing in...<br>";
            echo "ID:".$row ['ID'] . "|Username:".$row ['Username'] . "|Score:".$row ['Score'] . "|Status:".$row ['Status'];
        }
    }
}
else {
    echo "Incorrect username or password.";
}
?>

谢谢。

Answer 1

只需将输出textarea的 letter-spacing CSS property 设置为相对值（例如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>

更改字符间距

1 个答案: