5

javascriptを使用して、テキストボックスの選択したテキストを太字/斜体/下線にする必要があります。そのために私は次のコードを使用しています。

<img src="~/images/Bold"  alt="Bold" onclick="changeFont('TextBox1','b');"  />
<img src="~/images/Italic" alt="Italic" onclick="changeFont('TextBox1','i');"  />
<img src="~/images/Underline" alt="Underline" onclick="changeFont('TextBox1','u');"  />


<script type="text/javascript" language="javascript">
    function changeFont(txt, change) {
        if (change == 'b') {
            if (document.getElementById(txt).style.fontWeight == 'bold')
                document.getElementById(txt).style.fontWeight = 'normal';
            else
                document.getElementById(txt).style.fontWeight = 'bold';
        }
        else if (change == 'i') {
            if (document.getElementById(txt).style.fontStyle == 'italic')
                document.getElementById(txt).style.fontStyle = 'normal';
            else
                document.getElementById(txt).style.fontStyle = 'italic';
        }
        else {
            if (document.getElementById(txt).style.textDecoration == 'underline')
                document.getElementById(txt).style.textDecoration = 'none';
            else
                document.getElementById(txt).style.textDecoration = 'underline';
        }
    }
</script>

しかし、ここでの問題は、太字の画像をクリックすると、テキスト全体が太字になりますが、選択したテキストは表示されないことです。他の2つの画像でも機能しません。

テキストボックスのテキストを保存しているときに、試してみてもhtmlタグを含むテキストを取得できません

document.getElementById('TextBox1').innerHTML;

テキストボックスの値しか取得できません。

javascriptまたはC＃を使用して同じものを保存および取得する方法はありますか？

よろしくお願いしますSC

4

2 に答える 2

2

ハイライトテキストの取得に関する問題に答える質問があります 。textareaで選択したテキストを取得するにはどうすればよいですか。

選択したテキストを太字にすることについては、htmlタグまたはbbcodeのようなものを使用し、ページに印刷するときにhtmlに解析する必要があります。

編集：これは、jqueryプラグイン「fieldselection」の動作を示すページです。

編集2：これは私がこれを行う方法の例です：jsfiddleリンク

HTML：

<input id="bold" type="button" value="B" />
<br />
<textarea id="editor"></textarea>

<div id="resultAsHtml"></div>
<br />
<div id="resultAsText"></div>

javascript（jquery）コード：

$(document).ready(function() {

    $("#editor").keyup(Update);

    function Update(){
        var text = $(this).val();
        var result = ParseToHtml(text);
        $("#resultAsHtml").html(result);
        $("#resultAsText").text(result);
    }

    $("#bold").click(function(){
        var range = $("#editor").getSelection();
        var textToReplaceWith = "[b]"+ range.text + "[/b]";
        $("#editor").replaceSelection(textToReplaceWith , true);

        var text = $("#editor").val();
        var result = ParseToHtml(text);
        $("#resultAsHtml").html(result);
        $("#resultAsText").text(result);
    });

    function ParseToHtml(text) {
        text = text.replace("[b]", "<b>");
        text = text.replace("[/b]", "</b>");
        text = text.replace("  ","&nbsp;");
        text = text.replace("\n","</br>");
        return text;
    }

    $("#bold").replaceSelection("[b]" + $("#editor").getSelection() + "[/b]", true);
});
于 2011-05-10T10:49:41.570 に答える
1

document.execCommand("太字", false, null); これは、すべてのブラウザで機能する最も簡単なテクニックです...

于 2011-12-01T11:30:47.497 に答える