css 在文本输入中使用粘连连字符

e3bfsja2  于 2023-01-27  发布在  其他
关注(0)|答案(1)|浏览(111)

我需要在一个文本输入中添加连字符。我附加了一个我需要的图片。我用红色标记了需要修复的内容。第一个连字符应该在三个数字间隔之后,下一个应该在两个间隔之后,依此类推。
当我单击每个数字时,数字会出现,但我希望默认情况下出现破折号。
我试着把它做得有板有眼,但没有成功。

<div class="row">
        <p id="p" style="font-size: 30px;">Introduzca ubicación:<input style="margin-left: 10px; font-size: 30px;"
            type="text" [value]="codeNum" id="code" placeholder="___-__-__-__-__">
          <button type="button" style="margin-left: 10px; font-size: 30px; border: white 3px solid;"
            class="btn btn-dark btn-lg" (click)="clear()">Borrar</button>
          <button type="button" style="margin-left: 10px; font-size: 30px; border: white 3px solid;"
            class="btn btn-dark btn-lg" (click)="allClear()">Borrar todo</button>
        </p>
      </div>
    </div>

    <div class="calculator-keys">
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('0')" value="0">0</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('1')" value="1">1</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('2')" value="2">2</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('3')" value="3">3</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('4')" value="4">4</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('5')" value="5">5</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('6')" value="6">6</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('7')" value="7">7</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('8')" value="8">8</button>
      <button type="button" class="btn btn-light waves-effect" (click)="pressNum('9')" value="9">9</button>
    </div>

谢谢

sxissh06

sxissh061#

如果你愿意使用软件包,有一些软件包可能适合你的需要,比如ngx-mask

npm i --save ngx-mask

你就可以

<input type="text" mask="000-00-00-00-00" [(ngModel)]="codeNum">

<p>{{ codeNum | mask: '000-00-00-00-00' }}</p>

示例:https://stackblitz.com/edit/angular-ngx-mask-example-zd89hh?file=src%2Fapp%2Fapp.component.html

相关问题