Caret geht beim Wertwechsel ganz nach links

Question

Wenn ich einen Wert in einem Eingabefeld (58.10) auf (58.1) ändere, wird der Cursor hinter 5 gesetzt, sobald ich "0" entferne. Ich erwarte, dass es neben "1" steht.

Reagieren:

// Props 
var data = [ 
    {unit_amount: 58.10, id: 1}, 
    {...}, 
    {unit_amount: 25.99, id: 3}, 
] 

_valueChange(i, e){ 
    e.preventDefault(); 
    var obj = this.props.data; 
    var num = obj.find(p => i === p.id); 

    num.unit_amount = e.target.value; 
}, 

// Render 

var lineItems = this.props.data.map(function(l){ 
    return(
    <tr key={l.id}> 
    <input type="number" value={l.unit_amount} onChange={this._valueChange.bind(this, l.id)} /> 
    </tr> 
) 
}) 

Wert ändert sich in Ordnung, aber der Cursor (die „Pipe“) geht auf die Spitze einmal verließ ich einmal die Rück Knopf drücken. Irgendwelche Ideen?

Answer 1

Es ist möglich, die Cursorposition nach dem Setzen des Wertes zu setzen. Suchen Sie einfach die Länge der Zeichenfolge und setzen Sie die Cursorposition auf die Länge der Zeichenfolge.

Überprüfen Sie diesen Beitrag für die APIs, nach denen Sie suchen. Get caret position in HTML input?