textareaの横幅200px高さが100pxあったとして、テキストの入力開始位置を上下中央にすることは可能でしょうか。
不可能な場合、他のdivタグなどをw200px,h100pxで作りtextareaを中央配置し、divの領域をクリックしたらtextareaへ入力状態になるようなことは可能でしょうか。
何卒よろしくお願いいたします。
html
1 2<textarea>テキスト</textarea> 3
css
1 2textarea { 3 text-align: center; 4 width: 200px; 5 height: 100px; 6} 7
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答1件
0
ベストアンサー
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>サンプル1</title> 6 <style type="text/css"> 7 html,body { 8 margin: 0; 9 padding: 0; 10 } 11 form > textarea { 12 width: 200px; 13 height: 100px; 14 position: absolute; 15 top:50%; 16 left:50%; 17 margin-top: -50px; 18 margin-left: -100px; 19 } 20 </style> 21 </head> 22 <body> 23 <div> 24 <form action=""> 25 <textarea>テキスト</textarea> 26 </form> 27 </div> 28 </body> 29</html> 30
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>サンプル2</title> 6 <style type="text/css"> 7 html, body, body > div { 8 margin: 0; 9 padding: 0; 10 height: 100%; 11 } 12 form { 13 display: flex; 14 height: 100%; 15 justify-content: center; 16 align-items: center; 17 } 18 textarea { 19 width: 200px; 20 height: 100px; 21 } 22 </style> 23 </head> 24 <body> 25 <div> 26 <form action=""> 27 <textarea>テキスト</textarea> 28 </form> 29 </div> 30 </body> 31</html>
こういうことかなというのを解釈して
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>サンプル2</title> 6 <style type="text/css"> 7 div#textarea { 8 width: 200px; 9 height: 100px; 10 display: flex; 11 justify-content: center; 12 align-items: center; 13 border: 1px solid #CCC; 14 } 15 textarea { 16 width: 100%; 17 height: 100%; 18 resize: none; 19 } 20 </style> 21 </head> 22 <body> 23 <div> 24 <form action=""> 25 <div id="textarea"> 26 テキスト 27 </div> 28 </form> 29 </div> 30 <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> 31 <script type="text/javascript"> 32 $(function () { 33 $("#textarea").on('click', function (e) { 34 e.preventDefault(); 35 var txt = $(this).text().trim(); 36 $(this).html($('<textarea>').val(txt)); 37 $('textarea').focus(); 38 }); 39 $('body').on('blur', 'textarea', function () { 40 var txt = $('textarea').val(); 41 $('#textarea').text(txt); 42 }); 43 }); 44 </script> 45 </body> 46</html>
投稿2018/07/31 08:45
編集2018/07/31 09:15退会済みユーザー
総合スコア0
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/31 08:49
退会済みユーザー
2018/07/31 08:52 編集
2018/07/31 09:00
退会済みユーザー
2018/07/31 09:15
2018/07/31 09:27
2018/07/31 09:49
退会済みユーザー
2018/07/31 09:54