Question

如何更改字段大小diynamicaly？
我有一个选择字段，有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>

Answer 1

快速'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');
 }
});

当然，这段代码不是很干。此外，通过JavaScript修改CSS属性从来都不是一个好主意 - 最好通过JS动态添加类，并在CSS文件中指定实际的CSS（duh）。

Answer 2

对不起，我一定是误解了你的问题。

所以你想基于什么，它的内容动态调整textarea的大小？您可以使用jQuery autoResize plugin进行此操作...

Answer 3

例如：

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

Answer 4

首先，我认为有更多的开发者可以提供帮助;这里任何方式都是答案

首先创建一个计算strlen的函数

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

第二次创建一个var 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";

动态更改<textarea>大小，样式</textarea>

4 个答案: