Potrzebuję zrobić pole wejściowe przepełnienie td bez zmiany jego położenia lub szerokości tds za pomocą css i jquery

Question

Potrzebuję powiększyć pole wejściowe, gdy jest on ustawiony, bez powiększania zawierającego td również.

Dalej na obydwu polach należy pozostawić rzeczywistą pozycję (spójrz na skrzypce, ruchy) i nie przesuwaj w górę lub w dół (co jest spowodowane pozycją absolutną).

To jest mój aktualny stan

$('.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/

Spodziewać się można mi pomóc dzięki!

Answer 1

To nie jest zbyt daleko od tego, co pierwotnie miał:

$('.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'); 
}) 

Aktualizacja: Pomyślałem Dodam więcej wyjaśnień na temat tego, co się tu dzieje. Zasadniczo wykrywa to, co jest wielkością przed uzyskaniem ostrości, następnie zwiększa rozmiar i ustawia prawy margines na różnicę między nowym rozmiarem i starym rozmiarem (dzięki czemu renderer widzi go jako taką samą "szerokość" jak przed uzyskaniem ostrości). Position: relative jest tak, aby szerokość elementu nie wpłynęła na szerokość td (o ile prawy margines jest ustawiony jako ujemny).

Answer 2

Możesz użyć numeru transform: scale(1.2), aby go powiększyć, dodać transition i usunąć absolute deklaracje pozycji.

$('.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

Spróbuj wymienić JavaScript w ścisłym CSS.

Jedną z rzeczy, którą zrobiłem, było sprawdzenie tekstu w td: w lewo. to jedyna prawdziwa różnica w tej chwili. Powodem tego jest ruch, kiedy przechodzisz do pozycji absolutnej, jest to, że stara się wyrównać elementy do środka, ale wtedy elementy absolutne nie są mierzone lub wycentrowane.

Oto CSS.

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

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

Daj mi znać, jeśli chcesz wyrównać tekst: środek i będę szukać innego rozwiązania.