Question

网上和本网站上有很多关于制作斜体字体的问题，但没有提到如何斜体只是字符串的一部分。

在我的情况下，有一个表格我输入书名，作者姓名和售出的数字。点击按钮后，我想要作者的姓名和销售的数字是正常的，但书名在文本区域（输出）中以斜体显示。

表格编码：

<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">

当用户输入书名时，因为他们输入的标题看起来是斜体，但该值不会保持斜体。在最后完成所需的计算后，我希望标题，作者和编号按此顺序显示：

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

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

此concatBook将通过函数显示在文本区域中。

我唯一想用斜体字的是bTitle。

感谢您阅读我的问题

Answer 1

要添加斜体样式（或您想要的观察者），您需要在span标记中包装要设置样式的文本。但是您无法在textarea内插入HTML。您应该使用<div contenteditable="true"></div>代替。

请看一下 minimal demo 。

HTML：

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

CSS：

span{
    font-style: italic;
}

JavaScript的：

var concatBook = "<span>by</span> sold Copies."
$('div').html(concatBook);

如何以斜体显示输出的一部分 - JavaScript

1 个答案: