人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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;
}

●質問者: worldtravel
●カテゴリ:ウェブ制作
✍キーワード:Focus GI JavaScript M1 アドバイス
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● kntr1
●30ポイント

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 + ');';

こうしたほうがいいかも

◎質問者からの返答

ありがとうございます。

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

追記

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

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


2 ● miyamuko
●300ポイント ベストアンサー

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

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;
}
◎質問者からの返答

素晴らしいです。

ありがとうございます。

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ