在 Ionic2 中的输入文本的插入符号处插入文本答案

【问题标题】：Insert text at caret of input text in Ionic2在 Ionic2 中的输入文本的插入符号处插入文本
【发布时间】：2016-09-28 07:02:06
【问题描述】：

我正在尝试创建简单的计算器应用程序。

我想在点击（单击）按钮时在输入文本的插入符号处插入文本。以下代码不适用于strPos = inputText.selectionStart;。似乎没有发生错误，就停在这里吧。

有人知道如何解决这个问题吗？

编辑

page1.html

<ion-input #myInput type="text" [value]="fomula" (focus)="onFocus($event)"></ion-input>
<button class="button" id="number" (click)="numberTapped(myInput, 1)">1</button>

page1.ts

onFocus($event){
  this.currentInput = document.activeElement;
}

numberTapped($event, number) {
  this.insertAtCaret($event, String(number))
}

insertAtCaret(inputId,text) {
  var inputText:any = myInput; //document.getElementById(inputId);
  var strPos = 0;
  strPos = inputText.selectionStart;

  var front = (inputText.value).substring(0,strPos);  
  var back = (inputText.value).substring(strPos,inputText.value.length); 
  inputText.value=front+text+back;
  strPos = strPos + text.length;
  inputText.selectionStart = strPos;
  inputText.selectionEnd = strPos;
  inputText.focus();
}

【问题讨论】：

标签： javascript typescript ionic2

【解决方案1】：

当numberTapped 被调用时，焦点已经丢失并且再次调用onFocus。所以在执行numberTapped 时，this.currentInput 不再是输入。

即使我认为你的方法不是最好的，解决方案也可能是

<ion-input #myinput type="text" [value]="fomula" (focus)="onFocus($event)"></ion-input>
<button class="button" id="number" (click)="numberTapped(myinput, 1)">1</button>

这样做，#myinput 现在是对该元素的引用。

来自文档Template Syntax

<!-- phone refers to the input element; pass its `value` to an event handler -->
<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>

<!-- fax refers to the input element; pass its `value` to an event handler -->
<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>

“电话”的哈希 (#) 前缀表示我们正在定义电话变量。

【讨论】：

感谢您的回答。我尝试了(click)="numberTapped(myinput, 1)" 和(click)="insertAtCaret(myinput, 1)"，但对我不起作用。程序停在strPos = inputText.selectionStart;。
您是否也相应地更改了 insertAtCaret 以使用 myinput 代替？
我试过了，但没用。请检查我编辑的代码。如果您给我任何建议，我将不胜感激。
对不起，我相信我无法帮助您，因为您似乎不了解基础知识。例如在使用未在上下文中定义的 myInput 时，您仍然定义了 inputId arg。这些是我没有时间解释的基础知识......

【解决方案2】：

我在 Ionic 4 项目中使用它

<ion-input #ioninput clear-input="true" placeholder="Text ..."> </ion-input>
<ion-button ion-button block (click)="insertAtCursor('value')">Button</ion-button>

我正在使用 Angular 8 | Angular 8 中的 ViewChild 需要 2 个参数

import { ViewChild } from '@angular/core';
import { IonInput } from '@ionic/angular';
export class TextPage implements OnInit {
 @ViewChild('ioninput', {static: false}) ioninputRef: IonInput;
constructor(){}
 insertAtCursor(textToInsert) {
// make sure we have focus in the right input
this.ioninputRef.setFocus();
// and just run the command
document.execCommand('insertText', false /*no UI*/, textToInsert);
     }
}

希望这会对某人有所帮助:)

【讨论】：