記入したすべての値を取りたいのですが....

Question

お世話になっております、石井と申します。
今、inputで打ち込まれた文字列をすべてunicodeで出したいのですが、やり方がわかりません。たぶんすごく初歩的なものだと思いますが助けていただければ助かります。
今までの記述です。```html
<input type="text" onKeypress="kanaFunction(event)">

<p id="uniCode"></p> ```

function kanaFunction(name){
	var x = event.charCode || event.keyCode;
	var res = String.fromCharCode(x);
	document.getElementById("uniCode").innerHTML=x+res;
}

jQueryは使っておりません。
よろしくお願いします。

Answer 1

inputで打ち込まれた文字列をすべてunicodeで出したい

JavaScriptの文字列は全てUnicodeです。
内部的にはUnicodeの表現であるUTF-16(または、UCS-2)で扱われています。
そして出力した時もそれは同じ、つまり、JavaScriptの文字列を表示すること=Unicodeで出力することです。

質問していることは恐らく、文字列の「Unicodeエスケープシーケンス」を出力したい、という事ではないでしょうか?
例えば、「あいうえお」を「\u3042\u3044\u3046\u3048\u304a」のように出力したい、という意味では?
以降では、これが求める解答であると仮定して話を進めます。

まず、String.fromCharCodeは間違いです。
これはUnicode番号の数値から、対応する文字を出力する関数です。

alert(String.fromCharCode(12354));
// 「あ」を出力します。

文字からUnicode番号を出力したい場合、String.prototype.charCodeAtを利用します。

alert('あ'.charCodeAt(0));
// 「12354」を出力します。

文字列を扱えるように関数化すると以下のようになります。

/**
 * 文字列に含まれる文字全てをUnicodeエスケープシーケンスに変換する
 *
 * @param {string} str 変換する文字列
 * @return {string} 変換された文字列
 */
function escapeUnicode(str) {
    /**
     * Unicodeエスケープシーケンスに変換された出力文字列
     * @type {string}
     */
    var unicode_escaped_str = '';
    /**
     * 文字のインデックス番号
     * @type {number}
     */
    var index = 0;
    /**
     * 文字に対応するUnicode番号
     * インデックス番号に対応する位置に文字がない場合、NaNが格納される
     * @type {number}
     */
    var char_code;
    /**
     * Unicode番号の16進数文字列
     * @type {string}
     */
    var hex_char_code;

    /**
     * 1文字ずつUnicode番号を取得し、処理を行う。
     */
    while (!Number.isNaN(char_code = str.charCodeAt(index++))) {
        /**
         * 文字に対応するUnicode番号を16進数文字列に変換
         * 4桁になるよう、0埋めも行う
         * @link http://stabucky.com/wp/archives/4655
         */
        hex_char_code = ('000' + char_code.toString(16)).slice(-4);

        /**
         * Unicodeエスケープシーケンスを出力文字列に追加
         */
        unicode_escaped_str += '\\u' + hex_char_code;
    }

    return unicode_escaped_str;
}

これを利用して、以下のようにすることで目的のコードが実現できます。
※escapeUnicode関数は既に定義済みであるものとします。

<input type="text" id="input">
<p id="output"></p>

/**
 * 要素にテキストを設定する。textContentプロパティのクロスブラウザ関数
 * @param {Node} targetNode 設定対象の要素
 * @param {string} text 設定するテキスト
 */
var setText =
    ('textContent' in document.documentElement) ?
    function (targetNode, text) {
        /**
         * 対象要素のtextContentプロパティに新しいテキストを代入
         */
        targetNode.textContent = text;
    } :
    function (targetNode, text) {
        /**
         * 対象要素内の全子要素を削除
         */
        var childNode;
        while ((childNode = targetNode.firstChild)) {
            targetNode.removeChild(childNode);
        }
        /**
         * テキストノードを挿入
         */
        targetNode.appendChild(
            targetNode.ownerDocument.createTextNode(text)
        );
    }
;

function inputListener(e) {
    var inputElem = e.target;
    setText(
        document.getElementById('output'),
        escapeUnicode(inputElem.value)
    );
}

document.getElementById('input').addEventListener('input', inputListener, false);

サンプル

ちなみにしれっと使っていますが、DOM要素に文字列を設定する場合はinnerHTMLではなくtextContentを利用してください。
このコードではtextContentに対応していないブラウザのため、setText関数を定義しています。
innerHTMLは処理が重い問題もあるため、可能な限り利用しないようにしましょう。

また、input要素の入力値はvalueで取得できます。
charCodeまたはkeyCodeは押されたキーボードのキーの番号を返すもので、これはキーボード操作をJavaScriptで実現する時などに利用します。

さらに、文字列が入力された時に処理を行う場合はkeydownイベントやkeypressイベントではなく、inputイベントを利用してください。
右クリックメニューでコピー&ペーストされた場合、keydownイベントやkeypressイベントでは処理されません。
このinputイベントは古いブラウザには対応していないため、目的の環境で動作しない等の問題がありましたらお知らせください。

Comments

[退会済みユーザー]

sounisi5011さん、ありがとうございます！解決いたしました！