在按钮单击时将文本添加到现有输入字段

Posted 2023-03-13

【中文标题】在按钮单击时将文本添加到现有输入字段

【英文标题】：Add Text to an Existing Input Field on Button Click

【发布时间】：2018-01-31 06:33:14

【问题描述】：

我正在创建一个网站，该网站的管理员会定期发布文章（很像博客）。作为管理员，我可以轻松编写基本的 html 文档，但其他管理员对 HTML 完全不熟悉。

我有一个表单，他们将使用该表单发布带有作者、标题和内容字段的文章。我目前正在使用“内容”字段并在提交表单后将其显示为 HTML。为了帮助其他用户，我添加了“标题”、“段落”、“图像”和“换行符”按钮。单击这些按钮时，我想将 html 标记添加到现有字段（通常已经填充了文章文本）。

想法是这样的：

我单击段落按钮，我的字段显示如下： “<p>type here</p>”。 然后我输入段落并换行。我决定在它之后添加一个子标题并单击标题按钮：

<p>I replaced the text</p>
<h3>type sub-heading here</h3>

我不希望按钮以任何方式创建新输入或添加到表单中。我也不希望它替换或重置那里的文本，而只是在光标所在的位置添加文本。我找到了很多方法来添加表单字段、替换它们、隐藏它们等，但无法挖掘任何关于使用按钮编辑现有文本的帖子。

有人知道我该怎么做吗？我使用 angular 2 作为框架，因此任何适合它的解决方案（javascript、typescript、angular 2 数据绑定等）都可以使用。

这是我的 HTML：

<div class="edit-article">
  <h2 *ngIf="isEdit">Edit an Article</h2>
  <h2 *ngIf="!isEdit">Add an Article</h2>
  <div class="input-group">
    <label for="title">Title</label>
    <input mdInput id="title" type="text" [(ngModel)]="title">

    <label for="author">Author</label>
    <input mdInput id="author" type="text" [(ngModel)]="author">

    <label for="article-content">Content</label>
    <input mdInput id="article-content" type="textarea" class="multi-line-input" [(ngModel)]="content">
  </div>
  <div class="button-group left">
    <button class="button secondary" (click)='onAddHeader()'>Header</button>
    <button class="button secondary" (click)='onAddParagraph()'>Paragraph</button>
    <button class="button secondary" (click)='onAddImage()'>Image</button>
  </div>
  <div class="button-group right">
    <button class="button primary" (click)="onSaveArticle()">Save</button>

TS 文件：

export class ArticleEditComponent 
  isEdit = false;

  public title: string;
  public author: string;
  public content: string;

  constructor(
    public dialogRef: MdDialogRef<any>, @Inject(MD_DIALOG_DATA) private dialogData: any,
    public afAuth: AngularFireAuth, public afDB: AngularFireDatabase,
    public articleService: ArticleService) 
  

  onSaveArticle() 
    this.articleService.createArticle(new Article(
    this.title, this.author, this.content));
  

onAddHeader()
    document.getElementById("article-content").innerText += '<h3></h3>';
    console.log('running header function');
  

  onAddImage()
    document.getElementById("article-content").innerText += 'add image tag';
    console.log('running header function');
  

  onAddParagraph()
    document.getElementById("article-content").innerText += '<p></p>';
    console.log('running header function');
  

【参考方案1】：

以下是您可以调整的示例：

HTML：

<input #input type="text">
<button (click)="addText()">Click me to add some text</button>
<button (click)="reset()">Reset</button>

TypeScript：

  @ViewChild('input') private input;

  addText()
    this.input.nativeElement.focus();
    let startPos = this.input.nativeElement.selectionStart;
    let value = this.input.nativeElement.value;
    this.input.nativeElement.value= 
    value.substring(0, startPos) +' I am inserted ' + value.substring(startPos, value.length)
  

  reset()
      this.input.nativeElement.value='';
  

Plunker

【讨论】：

我确实检查了这个并且它有效，但是对于一个 Angular 2 项目，使用 Angular 数据绑定的另一个答案要简单得多，编码也少得多。

好点。另一种方式只添加到末尾，而不是光标处。出于这个原因，这种方式很好。

如果输入框和按钮是由两个不同的组件渲染的，如何使用这个方案？在这种情况下，#input 未定义。

@Tanmoy Bhattacharjee，你的意思是 input.focus() ？将其移至代码。您已经通过 ViewChild 获得了参考。

我有两个组件。一个组件有输入，另一个组件有一个按钮现在我有按钮的组件我已将代码移动到.ts，但它仍然以未定义的输入 html 的形式出现： html: 点我！！ .ts: @ViewChild('input') 私人输入； addText(event) console.log(this.input); //这是未定义的

【参考方案2】：

如果您使用的是 ngModel，则相应输入字段中的任何内容都将绑定到您列出的变量。

<input mdInput id="title" type="text" [(ngModel)]="title">

用户键入的任何内容都将绑定到上述输入中的“title”变量，您可以在组件或模板中的任何位置修改该变量，它将反映在视图中。因此，如果您只想在输入字段中添加文本，您可以执行以下操作：

<button class="button secondary" (click)="title = '<p> type here </p>' + title">Paragraph</button>

或者你可以在组件代码中实现

<button class="button secondary" (click)="addText()">Paragraph</button>


 ...somewhere in your component....

addText() 
   f.title = '<p> type here </p>' + f.title;

（以上假设您已将表单包装在 ngForm 组中，并为其赋予标识符 #f ，就像他们在这里所做的那样：https://angular.io/api/forms/NgForm）

该方法会将该文本添加到标题输入字段中已有内容的开头（注意：您可能必须转义该反斜杠，我不记得了）。您根本不需要使用 document.getElementById 查询。在 Angular 中最好避免这些。如果你使用的是 ngModel，你也不应该真的需要访问 innerText 属性。 2-way binding的美妙之处在于它基本上已经以'title'变量的形式为您提供了innerText属性。事实上，几乎总是可以避免访问文档对象和 nativeElement 属性，并且应该尽可能避免。

如果您还没有，您可能需要从“@angular/forms”导入 NgForm。我不记得没有它 ngModel 是否可以正常工作。

【讨论】：

很棒的答案。我不敢相信我没想过只编辑我绑定表单的变量。我刚做了这个，它就像一个魅力。

我使用了你展示的第二种方法。当我单击按钮时，我更改了“this.content”以添加标签。