テキストボックス

例

お名前：

出力欄：

解説

名前を入力すると出力欄にあいさつが出力されます。この部分は次のようになっています。

<p><label for="input">お名前：</label> <input id="input" onchange="foo();"></p>
<p id="output">出力欄：</p>

ここで呼び出している関数 foo() は次のように定義することが考えられます：

function foo() {
  var x = document.getElementById("input").value;
  document.getElementById("output").innerHTML = 'こんにちは，' + x + 'さん！';
}

しかしこれではHTMLタグがそのまま出力されてしまいます。innerHTML の代わりに innerText というのもありますが，こちらは IE と Opera でしか対応していません。 プロンプト のところで使った htmlentities() のような自前の関数を定義して使うといいでしょう。

もう一つの方法は次のようにすることです：

function foo() {
  var x = document.getElementById("input").value;
  var t = document.createTextNode('こんにちは，' + x + 'さん！');
  document.getElementById("output").appendChild(t);
}

もっとも，これでは何度も名前を入れると出力が何度もされてしまいます。たぶん次のようにするのがいいでしょう：

function foo() {
  var x = document.getElementById("input").value;
  var t = document.createTextNode('こんにちは，' + x + 'さん！');
  var u = document.getElementById("output");
  u.replaceChild(t, u.childNodes[0]);
}

奥村晴彦

Last modified: 2012-04-18 10:05:44