ベストアンサー

javascriptのオンマウスについて

2013/03/14 15:56

http://lab.synck.com/Cal3.0/ 上記URLのカレンダーですが、日付にマウスポインタをあてるとテキストが日付の真下に表示されますよね。オンマウスの記述がキーなのだと思うのですが、これを真下に表示ではなくてHTMLでテキストボックスを１行作って、作ったテキストボックスに表示させるようにするにはどのようにすればいいでしょうか。または、真下表示ではなく、日付の１個したの段の１番左端からの表示でもかまいません。まったくわからず困っています。。

t-pop-corn-t
お礼率32% (102/311)

JavaScript
回答数4
ありがとう数0

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

babu_baboo
ベストアンサー率51% (268/525)

2013/03/15 03:06 回答No.4

ちょっとだけ　だそく（表示位置を変える）＆難読化？ぜんかくくうはくは、はんかくにしてください。そ～してからの～ http://jsbeautifier.org/ <!DOCTYPE html> 　<title></title> 　　 <meta charset="utf-8"> 　　　　　　　　<style> 　　　　　　 table.calendar { 　　　　　　　　 border : 1px gray solid; 　　　　　　　　　　 background : #ffe; 　　　　　　　　　　　} 　　　　　　　　　　　　　　　　　　　　　　　　　table.calendar th, 　　　　　　　　　　　　　　 table.calendar td { 　　　　　　　　　　　　　　 border : 1px gray solid; 　　　　　　　　　　　　　　　width : 4em; 　　　　　　　　　　　　　　 text-align : center; 　　　　　　　　　　　　　　 } 　　　　　　　　　　　　　　　　　　　　　　　　　 table.calendar th:nth-of-type(1) { 　　　　　　　　　　　background : #fee; 　　　　　　　　　　 color : red; 　　　　　　　　 } 　　　　　　　　　　　　table.calendar td:nth-of-type(1) 　　　{ 　　 background : #fee; 　color : red; } table.calendar th:nth-of-type(7) { background : #eef; color : blue; } table.calendar td:nth-of-type(7) 　{ 　　 background : #eef; 　　　color : blue; 　　　　　text-align : center; 　　　　　　 } 　　　　　　　　　　　　　　　　　　 table.calendar td > span { 　　　　　　　　　　　display : none; 　　　　　　　　　　　　 } 　　　　　　　　　　　　　　　　　　　　　　　　　　　 input#mess { 　　　　　　　　　　　　　　 display : none; 　　　　　　　　　　　　　　　position : absolute; 　　　　　　　　　　　　　　 border : 3px green double; 　　　　　　　　　　　　　　 } 　　　　　　　　　　　　　</style> 　　　　　　　　　　　　　　　　　　　　　　　<body> 　　　　　　　　　　　　　　　　　　 <table class="calendar"> 　　　　　　　<tr> 　　　　　<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat 　　　<tr> 　　 <td>1<span>message1</span> 　<td>2 <td>3 <td>4 <td>5<span>message5</span> <td>6 <td>7<span>message7</span> </table> 　<input type="text" value="" id="mess"> 　　　　　<script> 　　　　　　　　　　　 var viewMessage = (function () { 　　　　　　　　 var inp = document.getElementById ('mess'); 　　　　　　　　　　 var style = inp.style; 　　　　　　　　　　　var memory = null; 　　　　　　　　　　　　　　　　　　　　　　　　　return function (text, baseNode, side) { 　　　　　　　　　　　　　　 var p, x, y; 　　　　　　　　　　　　　　 if (baseNode) { 　　　　　　　　　　　　　　　if (memory == baseNode) return;//TDの中にタグがあると… 無駄を省く　　　　　　　　　　　　　　 memory = baseNode; 　　　　　　　　　　　　　　 p = getPosition (baseNode); 　　　　　　　　　　　　　inp.value = text; 　　　　　　　　　　　　 style.width = baseNode.offsetWidth + 'px'; 　　　　　　　　　　　switch (side) { 　　　　　　　　　　 case 1 : 　　　　　　　　 x = baseNode.offsetWidth; y = 0; break; 　　　　　　　case 2 : 　　　　　x = 0; y = -baseNode.offsetHeight; break; 　　　case 3 : 　　 x = -baseNode.offsetWidth; y = 0; break; 　case 4 : default : x = 0; y = baseNode.offsetHeight; break; } style.left = p.x + x + 'px'; style.top = p.y + y + 'px' ; style.display = 'block'; } else { 　inp.style.display = 'none'; 　　 memory = null; 　　　} 　　　　　}; 　　　　　　　}) (); 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//要素の位置をもとめる　　　　　　　　　　　　 function getPosition (e, x, y) { 　　　　　　　　　　　　　for (x = y = 0; e; e = e.offsetParent) 　　　　　　　　　　　　　　 x += e.offsetLeft, y += e.offsetTop; 　　　　　　　　　　　　　　 return {x: x, y: y}; 　　　　　　　　　　　　　　　} 　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //親探し　　　　　　　　　　　　　function parentCheck (e, type, value) { 　　　　　　　　　　　　 do if (e[type] == value) break; while (e = e.parentNode); return e; 　　　　　　　　　　　} 　　　　　　　　　　　　　　　　　　　　　　　　　//mouse over のイベントハンドラ　　　　　function handler (event) { 　　　var tb, td, sp; 　　 var e = event.target; 　var cname = 'calendar'; if ((td = parentCheck (e, 'tagName', 'TD')))//親にTDがあり if ((sp = td.querySelector ('span')))//その中にSPANがあり if ((tb = parentCheck (td, 'tagName', 'TABLE')))//先祖にTABLEがあり if (tb.classList.contains (cname))//それがcalendarならば return viewMessage (sp.textContent, td.parentNode, 4);//表示　viewMessage (); 　　 } 　　　　　　　　document.addEventListener ('mouseover', handler); 　　　　　　　</script>

その他の回答 (3)

babu_baboo
ベストアンサー率51% (268/525)

2013/03/15 00:53 回答No.3

ieは、するぅ。めずらしくこめんとつき。ぜんかくくうはくははんかくに。しょしんしゃように、かけたとおもう。すたいるがださいのは、かんべんね。 <!DOCTYPE html> <title></title> <meta charset="utf-8"> <style> table.calendar { 　border : 1px gray solid; 　background : #ffe; } table.calendar th, table.calendar td { 　border : 1px gray solid; 　width : 4em; 　text-align : center; } table.calendar th:nth-of-type(1) { 　background : #fee; 　color : red; } table.calendar td:nth-of-type(1) { 　background : #fee; 　color : red; } table.calendar th:nth-of-type(7) { 　background : #eef; 　color : blue; } table.calendar td:nth-of-type(7) { 　background : #eef; 　color : blue; 　text-align : center; } table.calendar td > span { 　display : none; } input#mess { 　display : none; 　position : absolute; 　border : 3px green double; } </style> <body> <table class="calendar"> 　<tr> 　　<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat 　<tr> 　　<td>1<span>message1</span> 　　<td>2 　　<td>3 　　<td>4 　　<td>5<span>message5</span> 　　<td>6 　　<td>7<span>message7</span> </table> <input type="text" value="" id="mess"> <script> var viewMessage = (function () { 　var inp = document.getElementById ('mess'); 　var style = inp.style; 　var memory = null; 　return function (text, baseNode) { 　　var p; 　　　　if (baseNode) { 　　　if (memory == baseNode) return;//TDの中にタグがあると…　無駄を省く　　　memory = baseNode; 　　　p = getPosition (baseNode); 　　　inp.value = text; 　　　style.width = baseNode.offsetWidth + 'px'; 　　　style.left = p.x + 'px'; 　　　style.top = p.y + baseNode.offsetHeight + 'px' ; 　　　style.display = 'block'; 　　} 　　else { 　　　inp.style.display = 'none'; 　　　memory = null; 　　} 　}; }) (); //要素の位置をもとめる function getPosition (e) { 　var x, y; x = y = 0; 　while (e) x += e.offsetLeft, y += e.offsetTop, e = e.offsetParent; 　return {x: x, y: y}; } //親探し function parentCheck (e, type, value) { 　do if (e[type] == value) break; while (e = e.parentNode); 　return e; } //mouse over のイベントハンドラ function handler (event) { 　var tb, td, sp; 　var e = event.target; 　var cn = ' calendar '; 　if ((td = parentCheck (e, 'tagName', 'TD')))//親にTDがあり　 if ((sp = td.querySelector ('span')))//その中にSPANがあり　　 if ((tb = parentCheck (e, 'tagName', 'TABLE')))//先祖にTABLEがあり　　　 if (0 <= (' '+ tb.className + ' ').indexOf (cn))//それがcalendarならば　　　　 return viewMessage (sp.textContent, td.parentNode);//表示　viewMessage (); } document.addEventListener ('mouseover', handler); </script>

Gaffgarion
ベストアンサー率45% (45/99)

2013/03/14 17:47 回答No.2

#1さんのを書くと以下。 <!DOCTYPE html> <html lang="ja"> <head><meta charset="utf-8"><title></title> <script> document.addEventListener("DOMContentLoaded", function(){ //(2)spanのデータをinnerHTMLやnodeValueなどで抽出する var text = document.getElementById('span').innerHTML; //(3)document.getElementByIDでテキストボックスを指定して、valueを書き換える document.getElementById('textbox').value = text; }, false); </script> </head> <body> <p><span id="span">毎月1日は激安セールの日☆</span></p>  <p><input type="text" id="textbox" value=""></p> </body></html> (1)のテキストボックスをjsで生成する方法もありますが、今回はhtmlに直書きです。 addEventListener使ってるのでIEでは動きません。実際にはクロスブラウザ対応の書き方をするか、jqueryなどのライブラリを使いましょう。 getElementByIdについては以下。 https://developer.mozilla.org/ja/docs/DOM/document.getElementById

yambejp
ベストアンサー率51% (3827/7415)

2013/03/14 16:50 回答No.1

表示される文字はtd内にあるdisplay:noneされたspanのデータだというのはわかりますね？であればその内容をテキストボックスに表示するのであれば (1)テキストボックスにidをふる (2)spanのデータをinnerHTMLやnodeValueなどで抽出する (3)document.getElementByIDでテキストボックスを指定して、valueを書き換える

質問者