Help us understand the problem. What is going on with this article?

テキストボックス入力時に値を毎回消さなくも良いようにする

実装する機能

Webサービスのフォーム入力画面を開発しているとき、以下の機能を実装したくて調べてみた。
テキストボックスに値が入っているとき、値を書き換える場合に、毎回入っている値を消さないといけない。
これがわずらわしいので、いちいち消さなくても良いようにしたい。
例えば以下のようなテーブルで各行に個数の入力欄があるとき。
table.PNG
個数欄の数値は0となっている。個数欄をクリックしたら、0の場合は0を自動的に消して、空欄にしたい。
すると、例えば値を2にしたいなら、2を1回入力するだけで済む。わざわざBackSpaceやDelを押して0を消す必要がない。
また、その後何も入力せずにカーソルが離れた場合は、もとのゼロの値に戻したい。
このような機能を、JavaScriptで実装する。

実装した結果

以下の画像のような感じ。最初に1行目の個数欄をクリックしたら、0が自動的に消える。そこで2を入力する。
次に、2行目の個数をクリックしたら、同じく0が自動的に消える。
が、何も入力せずに3行目にカーソルを移したので、2行目は0の表示に戻る。
focus_zero.gif

コード

table要素やinput要素などhtmlやcssに特別な工夫はいらない。該当のinput要素がformタグ内にあり、typeがnumberだとする。
body内にonloadを書き、formタグ内にあるすべてのinput要素に対して、typeがnumberならば、onfocusとonblurを乗っける処理を行う。それにより、カーソルが当たったときにonfocusのメソッドが走るようになる。カーソルが外れたときにはonblurが走るようになる。input要素の0などの値(value属性)は、phpなりPythonなりサーバサイド側の言語で実装する。

test.html
<html>
  <body>
    <form>
      <table>
        <tbody>
          <tr>
            <td>
            …(略)
              <input type="number" id="hoge1" name="hoge1">
            …(略)
            </td>
          </tr>
        </tbody>
      </table>
    </form>
    <script type="text/javascript">
      window.onload = function() {
        var obj = document.forms;
        if (!obj) return;
        for (var i = 0; i < obj.length; i++) {
          var ele = obj[i].elements;
          for (var j = 0; j < ele.length; j++) {
            // 乗っけたくない要素はここで除外する。
            if (ele[j].type != "number") continue;
            ele[j].onfocus = zero2Empty;
            ele[j].onblur = empty2Zero;
          }
        }
      }
      function zero2Empty() {
        if (this.value == 0) this.value = "";
      }
      function empty2Zero() {
        if (!this.value) this.value = 0;
      }
    </script>
  </body>
</html>

参考URL

あんぽんたん様の以下の記事を参考にしました。ありがとうございました。
表示されている文字を入力時に削除する

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした