javascriptについて


下記の処理を10回繰り返したいのですが、
同じ事を数字だけ変えて10回書くのはスマートではないので
このような場合はどのように書けばよいのでしょうか?

これはテキストをクリックすると入力できるようにテキストエリアになり
他の場所をクリックするとテキストに変わるというものです。

また、下記のコードでこういうときはこうかくといいよ!
といったアドバイスも大歓迎です。

よろしくお願いします。

window.onload = function(){
$('m1').onclick = changeInput1;
};
function changeInput1(){
var ele1 = $('m1');
var ele1text = ele1.innerHTML;
ele1text = ele1text.replace(/<br \/>|<br>/gi,"\n")
ele1.innerHTML = '<textarea id="m1i" class="mi">' + ele1text + '</textarea>';
ele1.onclick = "";
var ele2 = $('m1i');
ele2.focus();
ele2.onblur = changeText1;
}
function changeText1(){
var ele1 = $('m1');
var ele2 = $('m1i');
var ele1text = ele2.value;
ele1text = ele1text.replace(/\r\n|\r|\n/g,'<br />')
ele1.innerHTML = ele1text;
ele1.onclick = changeInput1;
}

回答の条件
  • 1人2回まで
  • 登録:2009/07/04 15:45:58
  • 終了:2009/07/04 22:18:19

ベストアンサー

id:miyamuko No.2

miyamuko回答回数29ベストアンサー獲得回数112009/07/04 22:10:33

ポイント300pt

以下のように、クリックすると編集できる要素に特定のクラス名を設定しておき、

window.onload でそれらの要素すべてに onclick を設定するようにすれば

クリックできる要素を追加するだけで JavaScript は修正不要になります。


逆に言えばあるテキストを編集可能としたい場合は

<div class="editable"></div>

で囲むだけでよいです。


// すべての editable な div をクリックしたときに changeInput1 が呼ばれるように設定。
window.onload = function() {
    var editables = getEditableElements();
    for (var i = 0; i < editables.length; i++) {
        editables[i].onclick = changeInput1;
    }
}

// すべての <div class="editable"></div> な要素を返す
function getEditableElements() {
    var r = [];
    var divs = document.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++)
    {
        var div = divs[i];
        if (div.className.indexOf("editable") >= 0) {
            r.push(div);
        }
    }
    return r;
}

// <div class="editable"> がクリックされたときに内部を <textarea> に変える
function changeInput1() {
    var div = this;
    var text = div.innerHTML;
    text = text.replace(/<br \/>|<br>/gi,"\n");
    div.innerHTML = '<textarea>' + text + '</textarea>';
    div.onclick = "";
    var textarea = div.childNodes[0];
    textarea.onblur = changeText1;
    textarea.focus();
}

// <textarea> から focus が外れたときに textarea を削除
function changeText1() {
    var textarea = this;
    var div = this.parentNode;
    var text = textarea.value;
    text = text.replace(/\r\n|\r|\n/g,'<br />');
    div.innerHTML = text;
    div.onclick = changeInput1;
}
id:worldtravel

素晴らしいです。

ありがとうございます。

もちろん思い通りの動作をしてくれます。

コードまで書いて頂いて本当に感謝です。

ありがとうございました。

2009/07/04 22:17:30

その他の回答(1件)

id:kntr1 No.1

kntr1回答回数82ベストアンサー獲得回数142009/07/04 16:05:14

ポイント30pt

window.onload = function(){

for( i=1;i<=10;i++ ){

changeinput( i );

}

};

function changeinput( i ){

var ele1 = document.getElementById( 'm' + i )

var ele1text = ele.innerHTML;

ele1text = ele1text.replace(/
|
/gi,"\n")

ele1.innerHTML = '<textarea id="m' + i + 'i" class="mi">' + ele1text + '</textarea>';

ele1.onclick = "";

var ele2 = document.getElementById( 'm' + i + 'i' )

ele2.focus();

ele2.onblur = changeText1(i);

}

function changeText1( i ){

var ele1 = document.getElementById( 'm' + i )

var ele2 = document.getElementById( 'm' + i + 'i' )

var ele1text = ele2.value;

ele1text = ele1text.replace(/\r\n|\r|\n/g,'
')

ele1.innerHTML = ele1text;

ele1.onclick = changeInput(i);

}

当然

var ele1 = $('m' + i );

のようにしてもいいです。

ele2.onblur = changeText1(i);

ele1.onclick = changeInput(i);

ちょっとこのような使い方が出来たかは、見覚えがないです

もしかしたら

ele2.onblur = 'changeText1( ' + i + ');';

ele1.onclick = 'changeInput( ' + i + ');';

こうしたほうがいいかも

id:worldtravel

ありがとうございます。

試していますのでお待ちください。

追記

試したのですが、思い通りの動作になりませんでした。

最初からテキストエリアの状態になり、クリックしても反応してくれません。

2009/07/04 16:36:45
id:miyamuko No.2

miyamuko回答回数29ベストアンサー獲得回数112009/07/04 22:10:33ここでベストアンサー

ポイント300pt

以下のように、クリックすると編集できる要素に特定のクラス名を設定しておき、

window.onload でそれらの要素すべてに onclick を設定するようにすれば

クリックできる要素を追加するだけで JavaScript は修正不要になります。


逆に言えばあるテキストを編集可能としたい場合は

<div class="editable"></div>

で囲むだけでよいです。


// すべての editable な div をクリックしたときに changeInput1 が呼ばれるように設定。
window.onload = function() {
    var editables = getEditableElements();
    for (var i = 0; i < editables.length; i++) {
        editables[i].onclick = changeInput1;
    }
}

// すべての <div class="editable"></div> な要素を返す
function getEditableElements() {
    var r = [];
    var divs = document.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++)
    {
        var div = divs[i];
        if (div.className.indexOf("editable") >= 0) {
            r.push(div);
        }
    }
    return r;
}

// <div class="editable"> がクリックされたときに内部を <textarea> に変える
function changeInput1() {
    var div = this;
    var text = div.innerHTML;
    text = text.replace(/<br \/>|<br>/gi,"\n");
    div.innerHTML = '<textarea>' + text + '</textarea>';
    div.onclick = "";
    var textarea = div.childNodes[0];
    textarea.onblur = changeText1;
    textarea.focus();
}

// <textarea> から focus が外れたときに textarea を削除
function changeText1() {
    var textarea = this;
    var div = this.parentNode;
    var text = textarea.value;
    text = text.replace(/\r\n|\r|\n/g,'<br />');
    div.innerHTML = text;
    div.onclick = changeInput1;
}
id:worldtravel

素晴らしいです。

ありがとうございます。

もちろん思い通りの動作をしてくれます。

コードまで書いて頂いて本当に感謝です。

ありがとうございました。

2009/07/04 22:17:30
  • id:kn1967
    kntr1 さんへ

    ソースコードは引用ではなく"スーパーpre記法"で書いてあげてください。
    そうすれば半角スペースによるインデントも残りますので、
    ご自身での再確認もやりやすくなります。

    引用と違ってボタンは用意されていませんので下記のように >|| と ||< で囲みます。
    >||
    スーパーpre記法の場合
    ||<

    プログラムによっては色分けも行ってくれます(完全ではありませんが目安にはなります。)
    >|php|
    phpソースコード
    ||<


    詳しくは回答欄下部の
    「はてな記法と一部のHTMLタグが使用出来ます。 ?」 の?をクリックすれば
    説明用のページに飛べますのでご一読を。
  • id:worldtravel
    ありがとうございます。
    消えている部分を戻しながら試しています。
    m(_ _)m

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません