JavaScriptを使用したテキストの更新

Hello World! 今日はJavaScriptを使用してクールなテキストのライブアップデートをする方法を説明します.私はあまりに長い記事をしたくないので、私はコア機能に集中するだけです.それでも、私はまた、最後にいくつかのクールなトリックをお見せしたい.しかし、我々は十分に話をしました、現在、おかしな、コードに集中しましょう!

JavaScriptを使用したテキストの更新

まず第一に

<div class="container">
  <div class="autoUpdateText"></div>
</div>

<form action="/profile" id="form">
  <input type="text" id="input" placeholder="Write here">
</form>

私はあなたが簡単にどのように必要なスタイルを入力できる原因を使用する方を好む.JavaScriptで扱うのも簡単です.

If you want to know more about HTML form input read (I recommend you to open it on a new page).

今回のCSSは重要です。私たちはすべての基本的なHTML入力がひどいと忌避に同意する

まず、コンテナをスタイル:

body {
  font-family: "Alatsi", sans-serif;
  margin: 0;
  overflow: hidden;
  background: white;
  color: black;
}

#form {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-content: center;
}

.container {
  display: flex;
  justify-content: center;
}

次に、入力に続くテキスト領域とテキストを入力します.

#input {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  width: 600px;
  height: 200px;
  color: #444;
  font-size: 8em;
  background-color: #ddd;
  padding: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.autoUpdateText {
  display: inline-block;
  font-weight: 900;
  font-size: 3.5em;
  line-height: 1em;
  font-family: monospace;
}

.autoUpdateText:hover {
  border-bottom: 0.15em solid white;
// Add here some style on hover
}

最後に、少なくとも、ショーの星、JavaScript：

Yes you're right, I used the same sentence .

パーティを始める前に、DOMをキャッシュしましょう.

The results show that caching your DOM elements dramatically improves the speed of your code execution. This is clearly seen when comparing tests 3 and 4 where you get a boost from 32,889 to 602,620 operations per second. Site Point

const input = document.querySelector("#input");
const h1 = document.querySelector(".autoUpdateText");
const form = document.querySelector("#form");
countLetters = 0;
maxLineCharacters = 78;

あなたがすぐに私はなぜ文字とmaxlinecharacter変数を作成表示されます.
ここで2つのイベントリスナーを追加します.最初にデフォルトでは、Enterキーを押してユーザーをクリックします.

form.addEventListener("submit", function (e) {
  e.preventDefault();
});

次に、入力イベントリスナー、毎回ユーザーが新しい文字コードを入力します.

input.addEventListener("input", function (e) {
  countLetters = h1.innerHTML.length;
    if (countLetters < maxLineCharacters) {
        h1.innerHTML = input.value;
    } else if (countLetters % maxLineCharacters == 0 && countLetters != 0) {
        inputValue = input.value;
        h1.innerHTML += "<br>";
        row = h1.innerHTML;
        input.value = "";
        h1.innerHTML = row + inputValue;
  } else {
        h1.innerHTML = row + input.value;
    }
});

それは長く見えるかもしれません、そして、最初の観察で巻いているかもしれません、しかし、私はあなたに線による説明が速くあなたを理解させると保証します.
h 1 .innerhtml.長さ
最初に、我々はh 1(どこに入力が表示されます)の長さであるように変数を数えます.私たちは静的変数を持つことができません(ユーザが文字を追加するたびに+ 1を加えてください).
私は2つの理由のために主に2つの理由のためにすべての次のコードを加えました、最初にHTMLテキスト入力が100文字の限界を持っているので、また、ユーザーが決定された数の文字を書くとき、いくつかの操作を実行する必要があるので、私は、改行を加えます.

if (countLetters < maxLineCharacters) {
    h1.innerHTML = input.value;

最初の78(上記のこの数を変更することができます)文字はちょうどクライアントの側を更新します.

     } else if (countLetters % maxLineCharacters == 0

場合は、48文字の改行を追加することができるようにするには、48の文字数を確認します.&& countLetters != 0) 私は最初の文字が偶数に表示されないようにこの部分を追加しました.inputValue = input.value;まず入力変数を変数に保存するh1.innerHTML += "<br>";それから、我々はH 1に線ブレークを加えますrow = h1.innerHTML;h 1を行区切りで変数に保存するinput.value = "";入力値をクリアします(ユーザは無限に型を指定できます).h1.innerHTML = row + inputValue;そして、私たちは、H 1がすべての変数を前にelse { h1.innerHTML = row + input.value; }最後の部分は、カウントが78より大きく、78の倍数ではない場合、前の行を表示します+新しい値が入力されます.

Simple as that, It's not data (rocket) science.

ここでライブプレビューを行うことができます.
Click Me

I think I will do another article on that, maybe telling you how to add a complete typewriter effect, how to capitalize all text when user checks a checkbox, or how to add a cursor effect when you write. If you're interested, be sure to smash that like button.

これが助けと感謝の読書を!
または、

究極のカンニングペーパーのコンパイル（200 +）-🔥🎁 / devへのロードマップ🚀

デビルローレン・ Mar 2・ 17分読む

#productivity #webdev #beginners #javascript

我々の会報を購読してください！

Loooong、楽しい、毎週あなたのために要約
私の記事の無料のPDF版
カスタマイズ可能な受信トレイ
それは---フリー-とあなたは私を助ける!