1

JAVASCRIPT と CSS を使用してテキストエリアのスタイルを設定しようとしているので、クリックするとサイズが高さ 20 ピクセルから高さ 120 ピクセルに拡大されますdocument.getElementById("tweet_area") が、テキストエリアをクリックせずにページ内でクリックするとテキストエリアが拡大します。これについて私を集めることができますか JavaScript は初めてです

<script language="javascript">

      document.onclick=changeElement;

      function changeElement() {

          var textarea = document.getElementById("tweet_area");

          textarea.style.backgroundColor="#fff";
          textarea.style.width="565px";
          textarea.style.color="#000";
          textarea.style.height="120px";
          textarea.style.paddingLeft="1px";
          textarea.style.paddingTop="1px";
          textarea.style.fontFamily="Tahoma";
          textarea.style.fontSize="10pt";
          textarea.style.border="groove 1px #e5eaf1";
          textarea.style.position="inherit";
          textarea.style.textDecoration="none";  
      }

</script> 


<style type="text/css">
#tweet_area{
    width:565px;
    height:25px;
    overflow:hidden;
    margin:1px auto;
    font-family:Tahoma;
    font-size:10pt;
    font-weight:400px;
    color:#000;
    max-width:565px;
    min-width:565px;
    min-height:25px;
    max-height:120px;
    border:groove 1px #e5eaf1;
    padding-right:10px;
}
</style>
4

3 に答える 3

2

クリック ハンドラーをドキュメント全体に適用しています。

 document.onclick=changeElement;

...そのため、ページ上の任意の場所をクリックすると応答します。テキストエリアだけに適用してみてください:

  document.getElementById("tweet_area").onclick=changeElement;

document.getElementById()要素を見つけるには、要素が解析された後にスクリプトを実行する必要があることに注意してください。そのため、要素の後にスクリプト ブロックを配置するか(ボディの最後が適切な場所です)、JS をwindow.onloadハンドラーでラップします。

そして、あなたは尋ねませんでしたが、私が提案するなら、JS関数でこれらの個々のスタイルをすべて設定しないでください。むしろ、それらのスタイルでクラスを作成し、JSにクラスを追加するだけです。

于 2013-06-03T11:06:03.837 に答える
0

TextAreaユーザーが押したときにサイズEnter Keyを変更するためのjQueryコードを作成しましたTextArea。のクリックイベントと同様に変更できますTextArea。

ここに投稿があります：https://stackoverflow.com/a/14211554

于 2013-06-03T12:02:30.413 に答える
0

CSS を使用してテキストエリアのスタイルを設定します。ここでは javascrccipt のスタイル設定は必要ありません。CSS で特定のクラスの下にスタイルを準備し、必要に応じて、このクラスとそのプロパティを要素に追加できます。これははるかにクリーンなソリューションです。focusイベントと blurイベントを使用して、textarea 要素を取得します。ここに例があります。

HTML

<textarea rows="4" cols="50" id="txtArea">

<textarea>

JS

$(document).ready(function() {

    $('#txtArea').on("focus", function(event) {

        if(!$('#txtArea').hasClass('customTextAreaClass')){

            $('#txtArea').addClass('customTextAreaClass');

        }
    });

    $('#txtArea').on("blur", function(event) {

        if($('#txtArea').hasClass('customTextAreaClass')){

            $('#txtArea').removeClass('customTextAreaClass');

        }
    });
});

CSS

.customTextAreaClass{
    background-color: #fff;
    width: 565px;
    color: #000;
    height: 120px;
    padding-left: 1px;
    padding-top: 1px;
    font-family: "Tahoma", Geneva, sans-serif;
    font-size: 10pt;
    border: groove 1px #e5eaf1;
    position: inherit;
    text-decoration: none;  
}
于 2013-06-03T12:14:24.890 に答える