Динамическое изменение размера, стиля <textarea> - PullRequest
Новая
       15

Динамическое изменение размера, стиля <textarea>

2 голосов
/ 17 ноября 2009

Как я могу изменить размер поля в динамическом режиме?
У меня есть поле выбора и есть 3 варианта с разными значениями. Поэтому, если пользователь выберет один из них, вы увидите значения. Но как я могу изменить размер, который значения из поля опций помещаются в 

function changeText()
        {

            var select       = document.getElementById("surl");
            var textfield    = document.getElementById("turl");
            var bold         = document.getElementById("burl");
            var link         = document.getElementById("linkText");

            if(bold.style.display == "none")
                bold.style.display = "";
           //if(link.innerHtml)

            bold.innerHtml   = select.value;
            //if(link.innerHTML !="")
               link.innerHTML= select.value;
            textfield.value  = select.value;

        }


<b>Sample: </b><select id="surl" onchange="changeText();" style="visibility: visible;" name="linkText">
         <option>Select LinkText</option>
         <option value="<a href='http://www.doesntexist.dsdsd/'>Want sign? http://www.doesntexist.dsdsd</a>">
            Variant1 
         </option>
          <option value="<a href='http://www.doesntexist.dsdsd/'>Wanna killme? http://www.doesntexist.dsdsd</a>">
            Variant 2
         </option>


     </select>
     <br />
    <div class="succes">
     <span id="burl" style="display: none"><br /><a id="linkText" href="http://www.doesntexist/"></a></span>
     </div>
     </p>
     <p>

         <textarea  id="turl" style="">
        <a  href="http://www.doesntexist">text...</a>
      </textarea>
     </p>

Ответы [ 4 ]

1 голос
/ 18 ноября 2009

Извините, я, должно быть, неправильно понял вашу проблему.

То есть вы хотите динамически изменять размер текстовой области, основываясь на чем, ее содержимом? Вы можете использовать плагин jQuery autoResize для этого ...

1 голос
/ 17 ноября 2009

Быстрое 'n' грязное решение jQuery будет следующим: 

$('input#foo-option-1').bind('change, click', function() {
 if ($(this).is(':checked')) {
   $('textarea').css('height', '150px');
 }
});

$('input#foo-option-2').bind('change, click', function() {
 if ($(this).is(':checked')) {
   $('textarea').css('height', '250px');
 }
});

$('input#foo-option-3').bind('change, click', function() {
 if ($(this).is(':checked')) {
   $('textarea').css('height', '350px');
 }
});

Конечно, этот код не очень СУХОЙ. Более того, изменение свойств CSS с помощью JavaScript никогда не было хорошей идеей - лучше динамически добавлять классы с помощью JS и указывать фактический CSS в ваших CSS-файлах (да)

0 голосов
/ 17 ноября 2009

Прежде всего, я подумал, что есть больше разработчиков, которые могут помочь; В любом случае, вот ответ

сначала создайте функцию, которая вычисляет strlen 

function strlen(strVar)
{
   return(strVar.length)
}

Второй создает переменную tfcount 

var tfcount      = strlen(select.value);

и наконец 

textfield.style.width   =  tfcount < 110 ? tfcount = 110 : 3.5*tfcount+"px";
textfield.style.height  =  tfcount < 110 ? tfcount = 110 : tfcount/2.5+"px";
0 голосов
/ 17 ноября 2009

Например: 

<script type="text/javascript">
document.getElementById("textarea_id").style.width = "300px";
document.getElementById("textarea_id").style.width = "200px";
</script>
...