2011-09-10 4 views
3

J'essaie de formater un texte sélectionné en gras à l'intérieur d'une zone de texte, mais cela ne se produit pas. Cependant, il est hapenning dans une envergure/div. Mon codeMettre en forme un texte dans la zone de texte

<html> 
<head> 
<title>Untitled Document</title> 
<script type="text/javascript"> 
function FormatSelectedWord(txtBox,style) 
{ 

var selectedText = document.selection 
? document.selection.createRange().text 
: txtBox.value.substring(txtBox.selectionStart,txtBox.selectionEnd); 

if(selectedText!='') 
{ 
var newText='<'+style+'>'+selectedText+'</'+style+'>'; 
txtBox.value=txtBox.value.replace(selectedText,newText) 
spOutput.innerHTML=txtBox.value; 
} 
} 
</script> 
</head> 
<body> 


<input type="text" name="txtBox"> </input> 
<input type="button" value="Bold" onclick="FormatSelectedWord(txtBox,'b')"> 
<span id="spOutput"></span> 
</body> 
</html> 

Est-il possible de le faire dans une zone de texte. Si c'est le cas, comment?

Merci

Répondre

3

Non, il est impossible de définir le style du texte dans une zone de texte. Vous pouvez rendre votre div ou span contentEditable = true si vous avez besoin d'un texte formaté modifiable.

+0

Comment n'ai-je jamais su cela ?! – Marcel

0

Plutôt que de réinventer la roue, vous êtes mieux de regarder la mise en œuvre TinyMCE ou d'une autre, même chose qui fait cela - il est assez facile. Il est très souvent recherché la fonctionnalité, et il est appelé un « éditeur de texte enrichi », car si vous voulez aller googler :)

Essayer d'ajouter ce type de fonctionnalité vous-même est un énorme boîte de Pandore, et vous avez vraiment ne veulent pas participer :)

0

Voici un exemple de ce que je pense que vous voulez: http://jsfiddle.net/6gQJC/1/

et voici ce que vous avez demandé: http://jsfiddle.net/6gQJC/

txtBox is undefined 

donc ceci:

<input type="text" name="txtBox"> </input> 

a besoin d'être

<input type="text" id="txtBox" name="txtBox"> </input> 

puis

function FormatSelectedWord(txtBox,style) 
{ 
    var textbox = document.getElementById('textBox'); 
Questions connexes