JavaScriptの最近のブログ記事

レイヤー機能とJavaScriptを組み合わせ折りたたみメニューを実現します。

function show(inputData) {
  var objectID=document.getElementById( "title_" + inputData );
  var buttonID=document.getElementById( "category_" + inputData );
  if(objectID.className=='close') {
    objectID.style.display='block';
    objectID.className='open';
  }else{
    objectID.style.display='none';
    objectID.className='close';
  }
}

<ul>
  <li>
    <a href="javascript:void(0)" id="category_1" onclick="show('1');">大分類</a>
    <div id="title_1" style="display: none;position:relative;" class="close">
    <ul>
      <li>小分類1
      <li>小分類2
      <li>小分類3
    </ul>
    </div>
  </li>
</ul>

• 大分類
  • 小分類1
  • 小分類2
  • 小分類3

入力文字数をlengthプロパティで取得し、所定のバイト数以上かどうかチェックできます。（一般的に、半角文字が1バイト、かなや漢字など全角文字が2バイト）。

function bytes(str){
  var n = 0;
  for(i=0; i< str, length;i++ )
  n+=((str.charAt(i)>="｡"&&str.charAt(i)<="ﾟ")?1:(escape(str.charAt(i)).length>3?2:1));
  return n;
}

function strCheck(area){
　var n = bytes(area.value);
　if(n>300) {
　　confirm("半角300文字までです\n(現在の文字数："+n+"バイト)");
　　area.focus();
　}
}

<textarea rows="8" cols="60" onblur="strCheck(this)"></textarea>