單擊時在文本區域中切換字體重量的按鈕

-1

我正在嘗試製作一個按鈕，該按鈕在單擊時將字體粗細更改爲粗體，然後在未單擊時再次恢復正常。但最困難的部分是，我只希望他們在粗體按鈕上單擊的文本區域的部分加粗，所以我不希望所有文本區域都變得粗體。我試圖讓所有的文本區域開始時都是大膽的，但它不起作用。我相信這可能很容易，但我無法弄清楚。我會把我的代碼放在下面，謝謝你的時間。單擊時在文本區域中切換字體重量的按鈕

<button class="changeButton" id="bold"><strong>Bold</strong></button> 
<textarea class="textdoc" name="textdoc"></div>

的JavaScript：

$(document).ready(function(){ 
    $('#bold').click(function(){ 
     $('.textdoc').toggleClass('.boldClass'); 
    }); 
});

PS：這顯然不是我的所有代碼，評論告訴我，如果你認爲我需要發佈這一切，但我認爲這個問題可能只是解決與我在這裏的代碼。

來源

2015-04-18 Joshua

*'我只想文本區域，他們點擊了被bolded'大膽按鈕的部分*請在更精確這部分。 –

您的意思是文本選擇？ – tandrewnichols

你的按鈕上有一個單詞，他們如何點擊它的不同部分？你的意思是？ –

.toggleClass('.boldClass')應該是不帶.等.toggleClass('boldClass');

而且站立着缺少一個右</textarea>（代替</div>）。
下面是一個例子：

$(document).ready(function(){ 
 
    $('#bold').click(function(){ 
 
     $('.textdoc').toggleClass('boldClass'); 
 
    }); 
 
});

.boldClass{ 
 
    font-weight:bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="changeButton" id="bold"><strong>Bold</strong></button> 
 
<textarea class="textdoc" name="textdoc">TEST</textarea>

如果你想點擊B並能夠在大膽，你有興趣contenteditable屬性來寫。（它不能在文字區域內完成）

$("[data-cmd]").click(function(evt){ 
 
    evt.preventDefault(); 
 
    var cmd = $(this).data().cmd; 
 
    document.execCommand(cmd, false, null); 
 
});

#editable{ 
 
    border:1px solid #ddd; 
 
    min-height:100px; 
 
    padding:5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a data-cmd="bold" href="#"><b>B</b></a> 
 
<a data-cmd="italic" href="#"><i>I</i></a> 
 
<a data-cmd="underline" href="#"><u>U</u></a> 
 

 

 
<div id="editable" contenteditable="true">Write here<div>

來源

2015-04-18 13:51:01

您也可以使用設計模式的iframe來執行此操作。 – jcubic

單擊時在文本區域中切換字體重量的按鈕

回答

相關問題