Autogrow jQuery плагин для динамического содержимого в Internet Explorer

Я использую плагин здесь http://plugins.jquery.com/project/autogrow и у меня возникла проблема в Internet Explorer и Chrome (не Firefox)

Смотрите код ниже:

<script type="text/javascript">
    $(document).ready(function() {
        $('#main').html('<textarea class=\"test\">aaaa</textarea>');
        $('.test').autogrow();
</script>

</head>

<body>
<div id="main">
</div>
</body>
</html>

В основном, если элемент новый после запуска страницы, он не работает. Поэтому я немного взломал плагин и изменил эти строки с помощью livequery (строка 68).

        this.textarea.livequery(function() {
    $(this).focus(function() {self.startExpand()});
    $(this).blur(function() {self.stopExpand()});
        });

Однако, это все еще не работает, хотя Firefox в порядке.

Вы можете помочь?

1 ответ

Решение

Я сделал это в Chrome/Safari, внеся следующие два изменения:

  1. В вашем коде меняем$('#main').html('<textarea class=\"test\">aaaa</textarea>');"включить line-height стиль, например: "$('#main').html('<textarea class=\"test\" style=\"line-height: 16px\">aaaa</textarea>');"
  2. Измените строку 50 файла jquery.autogrow.js из "if(this.line_height == NaN)"до"if(isNaN(this.line_height))"

Эффект довольно нервный в Chrome/Safari, похоже, это как-то связано с тем, что WebKit сообщает о новой примененной высоте текстовой области на 4 пикселя меньше, чем вы установили. Я предполагаю, что это связано с блочной моделью и некоторыми стилями, примененными браузером. но я не знаю Если вы довольны эффектом в FF, тогда это должно сработать, так как в FireFox это тоже довольно нервно.

Другие вопросы по тегам