• ベストアンサー

入力支援機能

テキストエリア内で入力中にテキストエリアの外にあるボタンをクリックすると入力した文字が太字(strongタグを追加)になったり斜字体(iタグを追加)になったりする機能を見かけますがあれはJavascriptですか？どうやって書いているのか教えてください。お願いします。

回答 全件
ベストアンサー
＃２＞Bのボタンを押したら<b></b>が挿入されるのはどうやっている…
参考ＵＲＬが参考になるかも・
とりあえずこんな感じでしょうか？ <html> <head> …

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

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

＃２＞Bのボタンを押したら<b></b>が挿入されるのはどうやっているんでしょうか？ 大分簡略したものですが、一例（ＩＥとFirefox で動作確認しています） 実際は、それぞれのブラウザやバージョンを調べて、適用できるメソッドなどを（ラップして）切り換えたりしていると思われます。 もっと良いやり方もあるかも知れません。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>サンプル</title> <script> <!-- function bold(){ if(document.all){ //IE var str=document.selection.createRange().text; document.selection.createRange().text="<b>" + str + "</b>"; } else { //Firefox var el=document.getElementById('text'); var sPos = el.selectionStart; var ePos = el.selectionEnd; var str = el.value.substring(sPos, ePos); el.value = el.value.substring(0, sPos) + "<b>" + str + "</b>" + el.value.substr(ePos); } } function italic(){ if(document.all){ //IE var str=document.selection.createRange().text; document.selection.createRange().text="<i>" + str + "</i>"; } else { //Firefox var el=document.getElementById('text'); var sPos = el.selectionStart; var ePos = el.selectionEnd; var str = el.value.substring(sPos, ePos); el.value = el.value.substring(0, sPos) + "<i>" + str + "</i>" + el.value.substr(ePos); } } //--> </script> </head> <body> <form name="FORM1"> <input type="button" value="Bold" onclick="bold()"> <input type="button" value="Italic" onclick="italic()"><br> <textarea ID="text" cols="80" rows="10"> test data 最後の行 </textarea> </form> </body> </html>

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

参考ＵＲＬが参考になるかも・

参考URL：
http://mugi.cc/js/hta/wysiwyg.htm
eccschool
質問者

補足

ブログの管理画面でBのボタンを押したら<b></b>が挿入される入力支援がありますよね・・・。あれはどうやっているんでしょうか？javaSCRIPTですか？

全文を見る
すると、全ての回答が全文表示されます。
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

とりあえずこんな感じでしょうか？ <html> <head> <script language="javascript"> window.onload=function(){ taStyle=document.getElementById('ta').style; } </script> </head> <body> <form> <textarea id="ta" rows=10> テストテストテスト テストテストテスト テストテストテスト </textarea> <input type=button value="斜体" onClick="taStyle.fontStyle=(taStyle.fontStyle=='italic')?'':'italic';"> <input type=button value="太字" onClick="taStyle.fontWeight=(taStyle.fontWeight=='bold')?'normal':'bold'"> </form> </body>

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • textareaへの入力支援機能（ボタン）[Javascript]

    textareaへの入力支援機能（ボタン）[Javascript] 他の方が質問されていた件への回答についてのですが、 http://okwave.jp/qa/q2097862.html ANo.3の方の回答を参考にブログにあるようなテキストエリアへの入力支援機能を作成しています。 javascriptはあまり詳しくないので、まず丸々コピーをして テストを行っていたのですが、FIREFOXだと正常に動きますが、 IEの場合、テキストを選択せずにボタンを押すとボタン内に直接タグが追加されてしまいます。 テキストを選択した状態ですと正常に動作するようです。 テキストを選択しなくてもタグが挿入されるか、テキストを選択していない場合はタグが挿入されないようにしたいのです。 色々いじってみたのですが、思うように動かすことができませんでした。。 詳しい方、対処方法がわかる方がいらっしゃったらぜひ教えていただけないでしょうか。 宜しくおねがいします。

  • 入力支援用アイコンについて

    javascriptでテキストエリア入力支援機能をつけたのですが、エディタ用の小さなアイコン（Ｂ、Ｉとかリンクなんかのアイコン）素材を探しています。どこかで配布しているのでしょうか？よくメール編集なんんかで使うやつです。 プログラムと関係ない質問でしたら申し訳ございません。一応javascriptなので・・・・ご了承下さい。

  • EXCEL VBAのユーザーフォーム上のテキストボックスの入力方法について

    すいません教えていただきたいことがあります。 EXCEL VBAのユーザーフォームについて、 コマンドボタンにタグを設定して、これにキーボードと同じ機能を持たせて テキストボックス内に入力することは可能でしょうか。 例えばコマンドボタンを「あ」～「ん」まで作り、それぞれのボタンに「あ」～「ん」までのタグを設定する。 Private Sub UserForm_Initialize() CommandButton1.Tag = "あ" CommandButton2.Tag = "い" ・・・・「ん」までボタンを作成する。 次に、 Private Sub CommandButton1_Click() TextBox1.Value = TextBox1.Value & CommandButton1.Tag End Sub Private Sub CommandButton2_Click() TextBox1.Value = TextBox1.Value & CommandButton3.Tag End Sub ・・・「ん」まで作成する。 この設定では、コマンドボタンのクリックで文字の追加はできますが、ボタンを押すと常に文字が一番後ろに追加されるため、 テキストボックスをクリックしても文章の途中に文字を挿入することが出来ません。 通常のキーボードの入力と同じようにテキストボックス内でクリックした箇所からコマンドボタンで入力を開始するような設定は可能でしょうか。 よろしくお願いします。

  • <textarea>に入力した文章をtxtで保存。

    <form>の<textarea>に入力した文章をtxt形式に変換してデスクトップに保存する方法はあるでしょうか？ テキストエリアに入力⇒リンクorボタンをクリックすれば、txt形式で保存またはダウンロードできるようなタグやJavascriptがあれば教えてほしいです。

    • ベストアンサー
    • HTML
  • ブログのタグ挿入の入力支援

    ブログの管理画面でよく見るタグ挿入の入力支援はJavaScriptでしょうか？どのようにプログラムされているのでしょうか？教えてください。Bボタンを押すと<b></b>が挿入される機能です。

  • javascriptで入力禁止文字をチェック

    javascriptで入力禁止文字をチェック 初めて質問させていただきます。 javascriptで入力フォーム（テキストフィールド）に入力された文字列の中に入力禁止文字がないかをチェックしたいとおもっております。 例えば、テキストフィールドに「バカ」「ハゲ」等と入力されており、送信ボタンを押すと「入力禁止文字が含まれています」とアラートが表示されるといったものです。 入力禁止文字がなければ、送信ボタンをクリックし、指定されたURLへジャンプしたいと考えています。 javascriptのソースをお教えいただけたり、参考になるサイトをお教えいただければ助かります。 よろしくお願いします。

  • テキストエリアにあわせた文字サイズ変更

    Ｊａｖａｓｃｒｉｐｔ自体うまく動かすことができず、 サンプルを探しても見つからず、困っております。 やりたいことは、 Aのテキストエリアに入力した文字を「OK」ボタンクリックと同時に Bという別のテキストエリア（エリアの枠は固定）にリサイズ表示させたいと思います。 テキストエリア自体を文字数により大きくするサンプルはありましたが その逆のテキストエリアのサイズに文字をあわせるものが見つかりません。 申し訳ありませんが、おしえていただけますでしょうか。

  • ブログの文字が公開すると変更！

    私はＦＣ２ブログを利用してゲームカテゴリで普通のブログを作っています。 新しく記事を書きプレビューさせるまでは良いのですが、いざ公開すると装飾した文字が勝手に装飾前に戻ってしまい困っています。 具体的に言うと、「<strong>太字</strong>」←このタグで太字装飾しており、プレビューではしっかり太字強調してくれてるのに公開したページで見ると太字表示されません。 ◆装飾に関してはWYSIWYGテキストエディター機能を利用していません。 ◆テンプレートは標準のものを使っています。 このような不具合について分かる方いらっしゃいましたら 考えられる問題点を教えて下さいm(_ _)m よろしくお願いします！

  • タグを直接タイプし実行したい

    解りにくくて、すみません。 テキストエリア等に、タグを打った場合にそのままタグが適用された 形状で表示したいのです。 ブログなどであるアレです。 （Bボタンを押すと、太字になって表示・書込みできる） しかし、テキストエリアには当然テキストしか入りません。 どのようにして実装しているのでしょうか？？ よろしくお願いします。

  • 入力に応じて有効化をするJavaScript

    テキストボックスに1文字でも入力があった時のみラジオボタンを選択可能にし、テキストボックスに入力されるまではラジオボタンを無効化したいと思っています どのようにJavaScriptを書けばいいか全くわかりません お願いします

EP-806ABのパソコン登録方法がわからない
このQ&Aのポイント
  • EP-806ABを使用してスキャンしたものをパソコンに保存する方法がわかりません。
  • EP-806ABとパソコンをwifiで接続し、スキャンデータを転送したいですが、登録方法が分かりません。
  • EP-806ABからパソコンへの印刷はできるが、逆の操作方法が不明です。
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する