Question

我希望生成能够＆＃34;复制＆＃34;的输入字段。它的价值 进入另一个元素（在我的案例段落中）。

到目前为止一切正常，但是当我尝试输入一些像......这样的文本字符串时，我遇到了很多问题。

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
interface ICartItem {
    id: number;
    name: string;
    price: number;
    quantity: number;
}
interface ICartItem2 {
    total_items: number;
    total_sum: number;
}
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent implements OnInit {

    items: Array<ICartItem> = []; 
    totals:  ICartItem2;
    total_items:number=0;
    total_sum:number = 0;
    cart: ICartItem;
    broadcast_obj = {items:[],totals:{}};
    duplicate:ICartItem ;
    constructor(private _data: DataService) {  }

    ngOnInit() {
        //this.items_count = this.cart.length;
        this._data.cast.subscribe(res => this.broadcast_obj = res);
        this._data.changeCart(this.broadcast_obj);
    }

    additem(id,itemText,amount){
        if(this.items.length==0){//no item in the array
            this.cart = {id:id, name: itemText, price: amount,quantity:1};
            this.items.push(this.cart);
        }
        else{
            this.duplicate = this.items.find(x => x.id == id);//check if item already exists in the cart
            if (this.duplicate === null || this.duplicate === undefined) { //item object not found in the array
                this.cart = {id:id, name: itemText, price: amount,quantity:1};
                this.items.push(this.cart);
            }
            else if(this.duplicate.id===id){
                this.duplicate.quantity++;
            }
        }

        this.broadcast_obj.items = this.items;
        this.total_items++;
        this.total_sum += amount;
        this.totals = {total_items:this.total_items,total_sum:this.total_sum}
        console.log(this.totals)            //Should give you valid log
        this.broadcast_obj.totals = this.totals; //Added as per my answer
        console.log(this.broadcast_obj.totals);
        this._data.changeCart(this.broadcast_obj);
    }

}

< b> text < /b> // without the space columns

...或其他HTML属性/标签......

因为更改multiple backslashes会将此文本格式化为HTML文本。但我想使用纯文本，包括这些标签/特殊字符。

＆＃13;

innerHTML

＆＃13;

如何在不使用文本字段/第二个输入字段的情况下禁用此特定情况Input some HTML text<input oninput="out1.innerHTML=this.value" type="text" placeholder="input text"> <p id="out1"></p> ----------------------------------------------------------<br><br> Change this text: <input oninput="out2.innerHTML=this.value" type="text" value="<b>x</b> \\ %&"> <p id="out2"></p>中的HTML格式？

我考虑过将(to copy exact the same text into the paragraph element without styling)与jQuery一起使用，但也必须采用一些更有效的方式只使用javascript。

Answer 1

我认为您应该尝试使用Node.textContent

因为正如文档所说：

Element.innerHTML返回HTML，如其名称所示。通常，为了在元素中检索或写入文本，人们使用innerHTML。但是，textContent通常具有更好的性能，因为文本不会被解析为HTML。

＆＃13;

Input some HTML text<input oninput="out1.textContent=this.value" type="text" placeholder="input text">

<p id="out1"></p>


----------------------------------------------------------<br><br>
Change this text:
<input oninput="out2.textContent=this.value" type="text" value="<b>x</b> \\ %&">

<p id="out2"></p>

＆＃13;

Answer 2

您需要.innerText而不是.innerHtml。这引用了the rendered text node。另一方面，innerHtml在这里sets HTML content，而不仅仅是文本节点。

如何使用innerHTML禁用HTML格式？

2 个答案: