Textarea immitation работает неправильно. любые замены?

Ответ 1

У меня возникли проблемы с определением границ содержимого textarea, поэтому при таком подходе я копирую содержимое textarea в аналогичный стиль p, который установлен в float: left; и затем изменяя размер textarea в зависимости от размера p. Это обрабатывает как ширину, так и высоту.

Я тестировал на Mac 10.8.1 FF 18.0, Safari 6.0, Chrome 25.0.1362.0 canary, iOS Safari 6.0.1 и iOS Simulator 5.1 (272.21). У меня нет ПК или IE.

http://jsfiddle.net/b7rDL/34/

HTML

<textarea id="tx" class="text-block" spellcheck="false"></textarea>
<p id="dupe" class="text-block"></p>

CSS

.text-block {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    resize: none;
    font-size:14px;
    border: none;
    line-height: 1;
    min-width: 30px;
    overflow: hidden;
    white-space: pre;
    display: block;
    outline: none;
    width: 30px;
    height: auto;
    border: 1px solid #ddd;
    background-color: #f7f7f7;
}

#dupe {
    float: left;
    display: none;
    width: auto;
    height: auto;
}

_{Я добавил фон и рамку, чтобы я мог видеть, что происходит.}

JavaScript

// no `var` so they are global and easier to work
// with in the inspector when using jsFiddle

$tx = $('#tx');
$dupe = $('#dupe');
lineH = Number($tx.css('line-height').replace('px',''));

update();

$tx.on('keydown', function() {
    setTimeout(update, 0);
});
$tx.on('propertychange input keyup change', update);

function update() {
    $dupe.text($tx.val());
    $tx.css({
        width: $dupe.width() + 7,
        height: $dupe.height() + lineH
    });
}

// not sure if this is needed, leaving it because
// I don't have many browsers to test on
 $tx.on('scroll', function() {
     tx.scrollLeft = 0;
     tx.scrollTop = 0;
 });

Я добавляю дополнительное пространство справа и внизу, потому что он, похоже, работает более последовательно таким образом. Кроме того, в HTML, wrap="off" необходим для версии Firefox, я использую.

У меня есть хорошие советы от этого сообщения в блоге.

Ответ 2

# 1

Рабочая скрипка находится здесь: http://jsfiddle.net/d9H9w/11/ (протестировано в IE8, Chrome и Firefox)

Вам нужно установить атрибуты ширины и высоты, когда пользователь вводит текстовое поле.

Высота

Это довольно просто:

• Получить содержимое текстового поля
• Соответствие символам новой строки
• Установите высоту для общего количества символов новой строки (плюс одна для первой строки и 1,5 для комнаты для маневра) в em.

Установка высоты в em делает этот размер шрифта агностиком, поэтому он будет работать с несколькими размерами шрифтов.

function getNewlines(){
    // get the value(text) of the textarea
    var content = textEl.value;

    //use regex to find all the newline characters
    var newLines = content.match(/\n/g);

    // use the count of newlines(+1 for the first line + 1 for a buffer)
    // to set the height of the textarea.
    textEl.style.height = ((newLines && newLines.length || 0)+2.5)+'em';
};

Ширина

Это тоже довольно просто, с одним getcha.

• Получить содержимое текстового поля
• Разделите символы новой строки, чтобы получить массив, состоящий из строк текстового поля
• Сортировка для получения самой длинной строки
• Установите ширину в длину самой длинной строки в em, умноженную примерно на 0,6 (emRatio в моем коде), плюс 2 ems для пространства буфера.

Эта последняя часть - это кикер. Измерение "em" должно быть квадратом, представляющим ширину и высоту, которые принимает один символ. Это не учитывает кернинг, поэтому высота char обычно точная, но ширина зависит от символов вокруг нее. Поэтому, предположив и проверив, я понял, что .6 em - это средняя ширина символа после кернинга..6 довольно близко, поэтому я добавляю 2 ems в ширину для бит буферного пространства.

var emRatio = .6;
function longestLine(){
    // get the value(text) of the textarea
    var content = textEl.value;

    // split on newline's. this creates an array, where each item in
    // the array is the text of one line
    var a = content.split('\n');

    // use a sorting function to order the items in the array:
    // longest string to shortest string
    a.sort(function(a,b){return b.length - a.length});

    // use the longest string * the emRatio to set the width
    // Due to kerning, the letters aren't ever really 1em x 1em
    // So I'm multiplying by an approximate ratio here (guess and check)
    textEl.style.width = (a[0].length * emRatio + 2)+ 'em';
};

Существующие проблемы с этой реализацией

• Чтобы поддерживать изменение размера во время длительных нажатий клавиш, должен быть включен обработчик onkeydown (это не оптимально для всех случаев, которые не включают нажатие длинного ключа).

Все, что считается, я думаю, что это соответствует тому, что вам нужно.

редактирует

Вместо emRatio быть .7, я изменил его на .6 и добавил буфер шириной 2 ems в ширину. Это касается обеих проблем @Naor, упомянутых в его комментариях.

Я обновил ссылку на скрипт и раздел Ширина, чтобы отразить изменения.

Ответ 3

EDIT 0

Запрос № 1 Обновление

Рабочее решение: http://jsfiddle.net/7aeU2/

JQuery

$(function() {
    //  changes mouse cursor when highlighting loawer right of box
    $("textarea").mousemove(function(e) {
        var myPos = $(this).offset();
        myPos.bottom = $(this).offset().top + $(this).outerHeight();
        myPos.right = $(this).offset().left + $(this).outerWidth();

        if (myPos.bottom > e.pageY && e.pageY > myPos.bottom - 16 && myPos.right > e.pageX && e.pageX > myPos.right - 16) {
            $(this).css({ cursor: "nw-resize" });
        }
        else {
            $(this).css({ cursor: "" });
        }
    })
    //  the following simple make the textbox "Auto-Expand" as it is typed in
    .keyup(function(e) {
        //  the following will help the text expand as typing takes place
        while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
            $(this).height($(this).height()+1);
        };
    });
});​

Запрос № 2 Обновление

Кроме того, здесь хорошее объяснение того, почему вы не можете полностью отключить проверку орфографии.

Это не относится к сфере CSS (что необязательно презентационные предложения). Речь идет не о стилистических особенностях рендеринг данных, но об обработке данных в интерактивном режиме.

В браузерах, поддерживающих "проверку орфографии" (которая может включать грамматику и проверки стиля), атрибут HTML spellcheck или соответствующий Атрибут IDL (DOM), настраиваемый в JavaScript, эффективен.

На практике эти браузеры, как правило, имеют "проверку правописания" по умолчанию только для текстовых полей, а поскольку в текстовых зонах обычно содержится языковые тексты, отключение которых не звучит полезно. Это в любом (пользователь может отключить его или выбрать язык).

через fooobar.com/questions/346200/...

Запрос № 1

• Простое решение довольно прямолинейно.

  Рабочий пример: http://jsfiddle.net/b7rDL/12/

  JQuery

  $("#Solution0").keyup(function(e) {   
      while($(this).outerHeight() < this.scrollHeight) {
          $(this).width($(this).width()+50);
      };
  });
  

  HTML

  <textarea id="Solution0" rows="1" style="height: 1.2em;"></textarea>
  

• Решение Fancier, которое потребует некоторого обновления, если вы хотите ширина, а не высота, чтобы расширяться. Тем не менее, это довольно приятно.

  • http://jsfiddle.net/edelman/HrnHb/
  • https://github.com/ultimatedelman/autogrow

• Другие решения. Я знаю, что все они расширяют высоту. Сообщите мне, нужна ли вам реализация ширины одного из следующих решений.

  • http://bgrins.github.com/ExpandingTextareas/
  • http://blogs.sitepointstatic.com/examples/tech/textarea-expander/index.html
  • http://code.google.com/p/xautoresize-jquery/downloads/list
  • http://www.impressivewebs.com/textarea-auto-resize/
  • http://www.technoreply.com/autogrow-textarea-plugin-3-0/

Запрос № 2

spellcheck="true" должен работать, как описано в Документы Mozilla: контроль проверки орфографии в форматах HTML. Он работает для меня в моем первом простом примере, запущенном в Firefox 13.0.1. В какой версии вы работаете?

Ответ 4

для # 3, параметр css, который вы ищете, это: outline: none;

Ответ 5

Запрос № 2

Работа Демо

<body spellcheck="false">
<div class="text-block" contenteditable="true">    
Some Text SpellCheck</div>

Hi Naor. Единственная проблема с этой задачей - отключить проверку орфографии для всех элементов тега <body>. Если это неважно, вы можете пойти с ним.

Ваш вопрос действительно интересный и интересный действительно понравился. Надеюсь, это поможет вам.!!

Ответ 6

Лучший эффективный способ, который работал у меня, в то время как я делал что-то очень близкое в прошлом, - это создание скрытого потока div с теми же точно стилями, что и в textarea. И чем установить таймаут для обновления своего источника HTML на основе информации из textarea. Это звучит немного страшно, но все же, после некоторого тестирования и игры вокруг ничего было лучше, это уже было предложено, так что просто мой вариант.

http://jsfiddle.net/f2gAD/16/

и jQuery на основе script:

var textarea = $('textarea'),
    textBlock = $('div.text-block'),
    interval, value, freq = 10,
    doTextAreaAdjust = function(){
       textarea.css({
          height: textBlock.outerHeight(),
          width: textBlock.outerWidth()
       });
    };
doTextAreaAdjust();
textarea
.focus(function(){
    interval = window.setInterval(
        function() {
          value = textarea.val().replace(/(\r\n|\n|\r)/gm, '[rnnr]');
          value = value.replace(/</gm, '||'); // break html tags
          value = value.replace(/\[rnnr\]/gm, '<br>');
          value = value + '|'; // or <span>|</span> for better pixel perfect
          textBlock.html(value);
          doTextAreaAdjust();
        }, freq
    );console.log(interval);
})
.blur(function(){
    window.clearInterval(interval);
});
​

Для производительности было сделано это как самостоятельный запуск/остановка таймаута по фокусу/размытию, хотя здесь все же требуется некоторое обходное решение. Хотя тестирование в Chrome отмечало, что интервал не был должным образом остановлен, если вы сделали размытие, нажав на другую вкладку. Так что, вероятно, замена функции self-call в setTimeout будет лучше.

Он работает более или менее точно в IE 7-8, которые предполагают, что основные цели, но все же некоторые текстовые переходы время от времени происходят, в то время как для других это нормально, но угадайте, что вы будете использовать функцию редактирования для современных браузеров. Порекомендовал бы использовать модернизатор для его обнаружения.

Ответ 7

Работа здесь http://jsfiddle.net/H2GSx/

Код здесь: HTML:

<div style="overflow: scroll; width: 200px; height: 100px;">
    <div class="text-block" contenteditable="true" spellcheck="false">Some Text</div>
</div>​

CSS

.text-block {
    resize: none;
    font-size:40px;
    border: none;
    line-height: 1;
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    min-width: 30px;
    overflow: visible;
    white-space: nowrap;
    display: inline-block;
}
​