Ho bisogno di fare un campo di input overlow un td senza cambiare la sua posizione o la larghezza del tds usando css e jquery

Question

Ho bisogno di ingrandire un campo di input quando è a fuoco senza il td che lo contiene anche.

Inoltre su entrambi i campi dovrebbe rimanere nella loro posizione attuale (dare un'occhiata al violino, si muove) e non muoversi su o giù (ciò che è causato dalla posizione assoluta).

Questo è il mio stato attuale

$('.Bemerkung').focus(function() { 
    $(this).attr('size','30'); 
    $(this).parent().css({'position':'absolute'}); 
    $(this).css({'position':'absolute'}); 
}) 
$('.Bemerkung').blur(function() { 
    $(this).attr('size','5'); 
    $(this).removeAttr('style'); 
    $(this).parent().removeAttr('style'); 
}) 

http://jsfiddle.net/kazuya88/dhy0dxyy/

Spero che tu mi puoi aiutare, grazie!

Answer 1

Non è troppo lontano da quello che originariamente aveva:

$('.Bemerkung').focus(function() { 
    oldWidth = $(this).width(); 
    $(this).attr('size','30'); 
    $(this).css({'position':'relative'}); 
    $(this).css({'margin-right':('-'+($(this).width()-oldWidth)+'px')}); 
}) 
$('.Bemerkung').blur(function() { 
    $(this).attr('size','5'); 
    $(this).removeAttr('style'); 
    $(this).parent().removeAttr('style'); 
}) 

Aggiornamento: Ho pensato che dovrei aggiungere ulteriori spiegazioni su ciò che sta succedendo qui. Questo in sostanza rileva la dimensione prima di ottenere la messa a fuoco, quindi aumenta la dimensione e imposta il margine destro alla differenza tra la nuova dimensione e la vecchia dimensione (facendo in modo che il renderer la veda come la stessa "larghezza" di prima di ottenere il focus). Posizione: relativo è tale che la larghezza dell'elemento non influirà sulla larghezza del td (purché il margine destro sia impostato negativo).

Answer 2

È possibile utilizzare transform: scale(1.2) per ingrandirlo, aggiungere transition e rimuovere le dichiarazioni di posizione absolute.

$('.Bemerkung').focus(function() { 
 
    $(this).css({ 
 
    'transition': 'transform 0.5s', 
 
    'transform': 'scale(1.2)' 
 
    }); 
 
}); 
 
$('.Bemerkung').blur(function() { 
 
    $(this).css({ 
 
    'transform': 'scale(1)' 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="weektimereg" class="recordlist" border=1 style="text-align:center;"> 
 
    <tr> 
 
    <th style="width:110px;">sample</th> 
 
    <th style="width:110px;">sample2</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type=text size=3 name=abc value='03:00'></input> 
 
     <input class='Bemerkung' type=text size=5 name=cde value='test'></input> 
 
    </td> 
 
    <td> 
 
     <input type=text size=3 name=abc value='03:00'></input> 
 
     <input class='Bemerkung' type=text size=5 name=cde value='test'></input> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type=text size=3 name=abc value='03:00'></input> 
 
     <input class='Bemerkung' type=text size=5 name=cde value='test'></input> 
 
    </td> 
 
    <td> 
 
     <input type=text size=3 name=abc value='03:00'></input> 
 
     <input class='Bemerkung' type=text size=5 name=cde value='test'></input> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 3

provare a sostituire il JavaScript con rigorosa CSS.

Una cosa che ho fatto è stata rendere il testo della cella td allineato: a sinistra. questa è l'unica vera differenza in questo momento. Il motivo per cui c'è movimento quando si passa ad una posizione assoluta è dovuto al fatto che sta cercando di allineare gli elementi al centro, ma poi gli elementi assoluti non vengono misurati o centrati.

Ecco il CSS.

table td{ 
position: relative; 
overflow: visible; 
text-align: left; 
} 

.Bemerkung:focus{ 
    width: 196px; 
    position: absolute; 
    z-index: 10000; 
} 

fatemi sapere se avete bisogno di text-align: center, cercherò una soluzione diversa.