【PHP】タグ機能②

下記投稿の続きで、タグ機能に文字かタグの数で改行するように制御を追加します。

https://qiita.com/ryouya3948/items/da1a53e32edbd16637a5

![tag9.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/d6c94a3f-cb7e-18ce-7e87-e164daead6da.gif)
# タグか文字の数で改行
```php:form.php
function inputChange() {
：
        spans = skill.getElementsByTagName("span"),
        skills = new Array();

    for (i = 0; i < spans.length; i++) {
        skills[i] = spans[i].textContent;
    }

    skills = skills.join('');

    if (3 <= spans.length || 9 <= skills.length) {
        // 改行処理
    }
：
```
タグ数と文字数を取得して、条件に合えば改行するようにします。
今回は`タグ数が３つ以上`または、`文字数が９文字以上`で設定します。

それでは、改行処理を実装していきます。
条件が一致したときに、`div要素`を作成して改行するようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/d16e9f49-5397-b20b-6f9e-f2004e21a432.png)
例えば上記のようなタグの場合は、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/aad0aea8-f5f4-ba64-743e-1b0b83cb48fd.png)
このように`div要素`をタグの間に入れて改行させます。

```php:form.php
:
    div_element = document.createElement("div");
    span_element.setAttribute("id", "child-span" + i + "");
:
    if (3 <= spans.length || 9 <= skills.length) {　　
       i--;
       if (document.getElementById('child-span' + i + '') !== null) {
          parentDiv.appendChild(div_element, document.getElementById('child-span' + i + ''));
       }
       i++;
       }
    i++;
```
`span要素`に変数iが入った`ID`を追加し、1個前のタグ（'child-span' + i + ''からi-1したもの）があれば、`div要素`を追加します。
![tag8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/c1d1ea04-a31d-5c8e-f638-d3b8e68ba203.gif)

しかし、現在のままだと２回目の改行を行うときに、タグ数と文字数が前の状態のため何を入力しても改行してしまいます。
なので、改行があった際の処理を追加します。

```php:form.php
<body>
:
<input type="text" id="sample" />
<div id="skill">
</div>
<input type="hidden" name="skill_count" id="skill_count"> //追加
:
</body>
:
    skill_count = document.getElementById('skill_count').val;
:
    if (0 < document.getElementById('skill_count').val) {
        i--;
        skills = new Array();

        // 改行した列で再度文字数取得
        for (k = 0; k < skill_count; k++) {
            skills[k] = spans[i].textContent;
            i--;
        }
        spans = '';
        skills = skills.join('');

        // skill_countの値で改行後のタグ数を決める
        switch (skill_count) {
            case 2:
                i += 1;
                spans = '@@';
                break;

            case 3:
                i += 2;
                spans = '@@@';
                break;
            case 4:
                i += 3;
                spans = '@@@@';
                break;

            case 5:
                i += 4;
                spans = '@@@@@';
                break;
            default:
        }

        i++;
        document.getElementById('skill_count').val += 1;
    }
    if (3 <= spans.length || 9 <= skills.length) {　
:
     document.getElementById('skill_count').val = 1;
    }
```
改行を判定する値はブラウザ側（ID属性：skill_count）で持ちます。
`skill_count`が改行後のタグ数になっているため、こちらで改行後のタグ情報を取得します。

`switch文`で`skill_count`の値から`spans`に`@`を代入して、
タグ数を決めています。

こちらの処理を追加すると、２回目以降の改行もタグ数と文字数をカウントするようになります。
![tag9.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/d6c94a3f-cb7e-18ce-7e87-e164daead6da.gif)

また、最終行タグのバツ印をクリックした際に`document.getElementById('skill_count').val`の値もデクリメントする必要があるので、最終行をクリックしたかの判定が必要になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/f92df080-2901-abfb-f75c-0289a4c64785.png)

```php:from.php
// タグのバツ印がクリックされた場合
$(document).on('click', '.far.fa-times-circle', function() {
    var k = 0,
        skills = new Array(),
        skill = document.getElementById("skill"),
        spans = skill.getElementsByTagName("span"),
        span = $(this).parents(".skill_tag")[0].textContent;

    switch (document.getElementById('skill_count').val) {
        case 1:
            var spans_count = spans.length - 1;
            break;

        case 2:
            var spans_count = spans.length - 2;
            break;

        case 3:
            var spans_count = spans.length - 3;
            break;

        default:
    }
    for (i = spans_count; i < spans.length; i++) {
        skills[k] = spans[i].textContent;
        k++;
    }
    $(this).parents(".skill_tag").remove();

    skills = skills.join('');
    if (skills.indexOf(span) != -1) {
        document.getElementById('skill_count').val -= 1;
    }
});
```
`spans_count`に総タグ数から最終行のタグ数を引いた値を代入して、
その値から`skills`に最終行のタグの文字を入れます。

`span`にバツ印をクリックしたタグの文字を代入し、
`skills`の中に`span`の値があれば、`document.getElementById('skill_count').val`をデクリメントします。

最後にすでに入力されているものについては、タグ追加しないようにします。

```php
function inputChange() {
:
  // 既に入力済みのものはタグ追加しない
  if (skills.indexOf(fome_x_name) != -1) {
     return false;
  }
:
```