Добавить индекс на номера на лету в качестве пользовательских типов, используя jQuery - PullRequest
Новая
       62

Добавить индекс на номера на лету в качестве пользовательских типов, используя jQuery

0 голосов
/ 29 июля 2011

Можно ли добавить индексный тег к числам, когда пользователь вводит текстовое поле, например, если пользователь должен ввести H20, он будет мгновенно преобразован в H 2 0. Я ищу решение с использованием jQuery?

Ответы [ 2 ]

1 голос
/ 29 июля 2011

Нет, текстовые поля могут не содержать html-разметку. Но вы можете заменить 2 на 2-символьный индекс ₂ (Unicode 2082).

Здесь функция: 

function fx(e)
{
  var k=String.fromCharCode(e.which);

  if(k.match(/\d/))
  {
    var r=String.fromCharCode(8320+Number(k));
    try{//IE
          document.selection.createRange().text=r;
         }
      catch(x)
      {//others
        var o         = e.target
        var intStart  = o.selectionStart;
        var intEnd    = o.selectionEnd;
        o.value = (o.value).substring(0, intStart) + r + 
                  (o.value).substring(intEnd, o.value.length);
                    o.selectionStart=o.selectionEnd=intStart+r.length;
                    o.focus();
      }  
      return false;
  }
  return true;
}

Вызов этой функции при нажатии клавиши.

Заменяет (если число было набрано) текущий выбор на индекс этого числа.
Unicode-char в позиции 8320 (HEX 2080) имеет нулевой индекс, он просто добавляет набранный номер к этой позиции и извлекает символ в новой позиции.

Демо: http://jsfiddle.net/doktormolle/KDgH9/

0 голосов
/ 29 июля 2011

Обновление 2 : приведенное ниже предложение не работает в Chrome или Safari :( Я изначально проверял его на Firefox. В любом случае, это может быть полезной отправной точкой.

Обновление : Как отметил Dr.Molle , вы не можете украсить содержимое обычного <textarea> разметкой HTML. Тем не менее, вы можете использовать какую-то библиотеку WYSIWIG, чтобы добиться того, что вам нужно. Например, я смог получить черновой вариант поведения, которое вам, кажется, нужно, используя TinyMCE . Взгляните на эту демонстрацию jsFiddle , чтобы увидеть, как она работает.

Оригинальный ответ : Вот своего рода хакерский подход , с которым вы могли бы работать: 

$("#text-input").keypress(function() {
    var text = $(this).val();
    $("#output").html( text.replace(/(\d+)/g, "<sub>$1</sub>") );
});
...