Question

是否可以在输入标签的ngModel属性中设置值的样式？

示例：

<input class="input" type="text" [(ngModel)] = "myService.text">

假设文本的价值为“ 28个包装”，我可以将28个粗体显示吗？

Answer 1

因此，如果我理解正确，那么无论何时值28，您都希望将其设置为粗体？

是的，您可以使用具有此类三元表达式的ng类

.bold{
font-weight:600;
}

<input type="text" ng-class="myService.text == '28 ? 'bold' : '''" class="input" ng-model="myService.text" />

Answer 2

这不是与角度相关的问题，而是与CSS相关的问题。

您不能在HTML / CSS中仅对输入的一部分进行样式设置，因此将无法进行成角度的显示。

相反，您可以使用隐藏在div后面的输入。这个想法是，当用户单击div时，您实际上是在集中输入。当用户键入文本时，您将捕获输入内容并用div填充div，最终在包数附近添加<span class"highlight">。

我用纯CSS / JS为您准备了stackblitz。您可以根据需要调整角度。

相关代码段：

HTML ：

<span id="hiddenSpan">This is the hidden div. Click it and start typing</span>

<div>
  <label for="in">The real input</label>
  <input id="in" type="text">
</div>

JS ：

const input = document.getElementById('in')
const hiddenSpan = document.getElementById('hiddenSpan')

function onInputChanged() {
  let text = input.value

  const regex = new RegExp('(\\d+) packages')
  let result = regex.exec(text)

  if(result) {
    hiddenSpan.innerHTML = '<span class="highlight">'+result[1]+'</span> packages'
  } else {
    hiddenSpan.innerHTML = text
  }
}

// Capture keystrokes.
input.addEventListener('keyup', onInputChanged)

// Focus the input when the user clicks the pink div.
hiddenSpan.addEventListener('click', function() {
  input.focus()
})

CSS ：

#hiddenSpan {
  background-color: pink;
}

.highlight {
  font-weight: bold;
  background-color: greenyellow;
}

注意：缺点是闪烁的插入符号不再可见。如果要模拟this resource，可以看看。

Answer 3

无法用粗体显示文本<input>字段的某些部分的样式。但是，可以使用contenteditable div代替文本<input>字段。在contenteditable div中，您可以使用其他HTML标记（例如<strong>）来按自己的喜好对文本的某些部分进行样式设置。

我创建了一个名为contenteditableModel的Angular指令（签出StackBlitz demo here），您可以使用它对contenteditable元素执行双向绑定，如下所示：

<div class="input" contenteditable [(contenteditableModel)]="myService.text"></div>

该指令使用正则表达式自动检查输入文本中的数字，并将其括在<strong>标记中以使其加粗。例如，如果您输入“ 28个包装”，则innerHTML的{{1}}的格式将如下所示（将“ 28”加粗）：

div

这是指令中用于执行格式化的代码：

<strong>28</strong> packages

您可以将var inputElement = this.elementRef.nativeElement; inputElement.innerHTML = inputElement.textContent.replace(/(\d+)/g, "<strong>$1</strong>"); this.change.emit(inputElement.textContent);标记更改为其他名称（例如，<strong>如果希望文本加下划线而不是加粗）。

执行格式化时，存在一个问题，即用户的文本光标位置会意外地重置回<span style="text-decoration: underline"> div的开头。为了解决这个问题，我使用了两个函数（contenteditable和getOriginalCaretPosition）来存储用户的原始光标位置，然后在执行文本格式设置后恢复该位置。这两个函数有点复杂，它们与OP的问题并不完全相关，因此在这里我不会对其进行详细介绍。如果您想了解更多关于他们的信息，可以联系我。

角度ngModel样式

3 个答案: