今日の人気記事

  1. Web上でプレゼンテーションを「LocalScroll」 - jQueryプラグイン
  2. 指定した要素の高さや横幅にアニメ効果を「CSS Animate Auto」

アルファベットを大文字/小文字に変換「Case Change」

当ページのリンクには広告が含まれています。

スポンサーリンク

アルファベットを大文字/小文字に変換するプラグイン「Case Change」を紹介します。

jQueryプラグイン「Case Change」

このプラグインを使えば、アルファベットの大文字と小文字をクリックひとつで簡単に変換することができます。

また、「文章の先頭のアルファベットだけを大文字」「単語の頭文字だけ大文字に」に変換もすることもできます。

スポンサーリンク

それではデモページで大文字/小文字を変換してみてください。

「Case Change」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Case Change のデモでーす。">
<title>Case Change - jQuery Plugin Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.casechange.js"></script>
</head>
<body>
<h1>Case Change のデモ。</h1>
<textarea id="text" rows="8" cols="50">
jQuery Plugin Demo. Case Change example. ABC Abc aBC abc
</textarea>

<p>
<select id="toCaseOption">
  <option>upperCase</option>
  <option>lowerCase</option>
  <option>sentenceCase</option>
  <option>titleCase</option>
</select>
<button id="demo">変換!</button>
</p>

<ul>
<li>upperCase:大文字に</li>
<li>lowerCase:小文字に</li>
<li>sentenceCase:文章の先頭だけを大文字に</li>
<li>titleCase:単語の頭文字だけ大文字に</li>
</ul>


<script>
$("#demo").on("click",function(){
  var toCaseOption=$( "#toCaseOption option:selected" ).text();
  $("#text").caseChange({
    toCase:toCaseOption,
    alwaysLowerCase:'none'
  });
});
</script>

<footer style="margin-top:20px;">
<a href="https://webkaru.net/jquery-plugin/casechange/">「jQueryプラグインまとめ」に戻る</a>
</footer>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)