Impedisci l'immissione sulla cella della tabella dopo aver raggiunto la larghezza fissa?

Question

Vorrei impedire l'input aggiuntivo su una cella di tabella HTML una volta raggiunta la larghezza.

La tabella ha un layout fisso, nessun avvolgimento e una larghezza specifica. L'overflow è attualmente impostato su nascosto.

E 'possibile filtrare (e in definitiva impedire) l'input in modo che si fermi alla larghezza fissa in modo che non ci sia overflow (nascosto o in altro modo). Attualmente sto filtrando il ritorno a capo usando jQuery in modo che la cella non si espanda a linee aggiuntive.

Forse sto chiedendo troppo da una tabella HTML ...

Answer 1

Una possibile soluzione è quella di copiare il contenuto della cella in keydown in un campo nascosto e per calcolare il valore di questo campo:

$("table input").on("keydown", function(e) { 
    $("#copy").text(this.value); 

    var width = $("#copy").outerWidth(); 
    console.log("w: " + width); 

    var code = e.keyCode ? e.keyCode : e.which; 
    if (width > 50 && code !== 8 && code !== 49) { 
     return false; 
    } 
}); 

Ho creato un violino con tale soluzione: http://jsfiddle.net/scaillerie/hnRjB/2/.

Un punto da notare è che il font-family e font-size dovrebbe essere lo stesso nel input e nel div in modo da avere il valore corretto, che è la ragione della regola CSS:

* { 
    font-family: arial; 
    font-size: 1em; 
} 

Ma invece di *, è necessario limitare in base alle proprie esigenze (ad esempio, table input, #copy).

---

EDIT:

Basta notare che con questo codice, l'utente può inserire solo più della lunghezza di ingresso, ma si può aggiungere un po 'di carattere "lungo" al vostro campo copiato, al fine di prova la larghezza: http://jsfiddle.net/scaillerie/hnRjB/3/.