3

There quite a few questions on the web and on this website about making italic fonts, but non mentions how to italic only part of a string.

In my case, there is a form I enter the book title, the author's name and the number sold. After clicking a button I want author's name and the number sold be normal but the book title to be in italic in the text area (output).

Coding for form:

<label for="txtName">Author Name</label>
<input type="text" id="txtName" size="50" placeholder="Eg, Darwin" maxlength="50">

<label for="txtTitle">Book Title</label>
<input type="text" id="txtTitle" size="40" placeholder="Eg, The Origin of Species" style="font-style:italic" maxlength="100">

<label for="txtNumber">Number Sold</label>
<input type="text" id="txtNumber" size="4" placeholder="Eg, 50000" maxlength="9">

When the user enters the book title, as they type title looks italic but the value will not stay in italic. After the required calculations is done at the end I want the title, author and the number shown in this order: 

bTitle = bookForm.txtTitle.value;
bName = bookForm.txtName.value;
bNumber = bookForm.txtNumber.value;

concatBook = bTitle+" by "+bName+" sold "+bNumber+" Copies."

This concatBook will be shown in a text area via a function.

The only thing I want to be in italic is bTitle.

Thanks for reading my question

  • javascript does not keep text styling. You need to do that with an html tag and/or css (like with your input field). See here for more info http://stackoverflow.com/questions/2108318/css-html-what-is-the-correct-way-to-make-text-italic also here http://stackoverflow.com/questions/19074391/how-to-allow-bolding-underlining-and-italics-in-textarea. – Jasen Jun 20 '15 at 02:48
  • Could try to use the Javascript method `italics()` http://www.w3schools.com/jsref/jsref_italics.asp – NightOwlPrgmr Jun 20 '15 at 02:54

1 Answers1

0

To add italic style (or wathever you want) you need to wrap the text you want to style in span tags. But you can't insert HTML inside a textarea. You should use a <div contenteditable="true"></div> instead.

Take a look at this minimal demo.

HTML:

<div contenteditable="true"></div>

CSS:

span{
    font-style: italic;
}

JavaScript:

var concatBook = "<span>by</span> sold Copies."
$('div').html(concatBook);
lmgonzalves
  • 6,518
  • 3
  • 22
  • 41
  • Thanks for the reply. but there is a problem here that it shows the work 'by' in italic not the value it holds, for instance if the bTitle holds the book's title, "bTitle" obviously it shows bTitle in italic not the vaue it carries. –  Jun 20 '15 at 03:44
  • What I am trying to do is to make the bTitle's value italic –  Jun 20 '15 at 03:45
  • My answer is a "minimal example". In your case you can do this: `concatBook = ""+bTitle+" by "+bName+" sold "+bNumber+" Copies."`. See a [new demo](https://jsfiddle.net/lmgonzalves/p0rheftz/1/). – lmgonzalves Jun 20 '15 at 03:48
  • Oh man, you rock. Thanks a lot. I was struggling with that for two weeks! –  Jun 20 '15 at 03:53
  • @aryazdani I'm glad for you! – lmgonzalves Jun 20 '15 at 03:56
  • It works perfectly fine, but I have a new problem with that! it doesn't call the DisplayHarvardBook(concatBook), it shows the result in a new page in stead of the text area defined in DisplayHarvardBook(); –  Jun 20 '15 at 03:57
  • I'm sorry but I don't understand what you mean :( Maybe you should elaborate a new question or explain better what you have and what you want. – lmgonzalves Jun 20 '15 at 04:02