2013年11月26日

contenteditable属性 要素内容の編集の可否、HTML5

スポンサード リンク

 contenteditable="true"
指定した要素のコンテンツを編集可能にします。HTML5の全ての要素に指定可能

div 要素

このdiv要素のテキストは編集可能になっています。contenteditable="true"
下の画像もドラッグして、移動したり、コピペ, 消去することができます。

li 要素

  • contenteditable 属性
  •  

dd 要素

開会日時
皇紀 2680年 7月24日20時〜23時
メイン会場
東京都新宿区 新国立競技場

WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)
コロリポプラン 詳細はこちら

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>contenteditable属性</title>
<style type="text/css">
<!--
:hover[contenteditable="true"]{
  color:#cc0033;
   }
.editbox{
  margin:5px;
  padding:5px;padding-left:10px;
  border:1px gray solid;
  border-left: 4px solid gray;
  background:#f5f5f5;
  min-height:1em;
   }
.editbox p{
  margin:0;
   }
.editUL li{
  list-style-type:none;
   }
-->
</style>
</head>
<body>
 <p>div 要素</p>
  <div class="editbox" contenteditable="true">
   <div>このdiv要素のテキストは編集可能になっています。contenteditable="true"<br />
   下の画像もドラッグして、移動したり、コピペ,消去することができます。
     <br />
<img src="image/hana.gif" alt="">
<img src="/image/wanwan.gif" alt="">
<img src="/image/raketto.gif" alt="">
  </div>
 </div>
<p>li 要素</p>
 <ul class="editUL">
  <li><div class="editbox" contenteditable="true">contenteditable 属性</div></li>
  <li><div class="editbox" contenteditable="true">&nbsp;</div></li>
 </ul>
<p>dd 要素</p>
 <dl>
  <dt>開会日時</dt>
<dd class="editbox"><div contenteditable="true">皇紀 2680年 7月24日20時〜23時</div></dd>
  <dt>メイン会場</dt>
<dd class="editbox"><div contenteditable="true">東京都新宿区 新国立競技場</div></dd>
</dl>
<p><button onclick="history.go(0)">元に戻す</button></p>
</body>
</html>

contenteditable="値"
true
該当要素を編集可能にします。
false
該当要素を編集不可能にします。
inset
祖先要素の属性値を継承します。
javascript 構文
element.contentEditable=true;
<button onclick="cngEdit.contentEditable=true" >編集可能にする "true"</button>
<button onclick="cngEdit.contentEditable=false" >編集不可能にする "false"</button>
<button onclick="alert(cngEdit.innerHTML);" >編集したHTMLソース表示</button>
 <div id="cngEdit" contenteditable="true">
  <div>当該要素のID名を指定して<br />
         編集モードを切り替えます。</div>
 </div>
 ✰ 編集お試しボックス
当該要素のID名を指定して
編集モードを切り替えます。
contenteditable //ブラウザによる挙動の違い
  <div id="cngEdit" contenteditable="true">
       この領域は編集できます。</div>
 上記コードで 「Enter」キーを押すとFirefox では <br>要素が挿入されますが
IEでは<p>タグが生成され上下に余白が入ります。</p>
これを回避し '一行改行' を実行するには 下の様に、コードを書き換えます。
実行すると <p>タグではなく、<div>タグが入ります。そして念のために、CSS で
P要素の 'margin' を'0' にします。#cngEdit p{ margin:0;}
 <div id="cngEdit" contenteditable="true">
   <div>この領域は編集できます。</div> <!-- DIVを入れ子にする-->
 </div>
上記 編集お試しボックスで、編集、コピーして貼り付け、 「Enter」キー を押す など
して、’編集したHTMLソース表示’ ボタンを押してください。思わぬ結果が..............
ブラウザを変えて、試してください。
posted by javaScript at 23:04 | 大阪 ☀ | HTML タグ 要素 | このブログの読者になる | 更新情報をチェックする

2013年11月17日

HTML5 placeholder属性

スポンサード リンク

 placeholder="属性値"

HTML5で導入されたplaceholder(プレースホルダー)属性は
一行テキストボックス<input type="text">や、複数行入力ボックス<textarea>
あらかじめ入力フィールドに、入力の手助けとなるフレーズを淡く表示します。
例えば、電話番号なら、 <input type="text" placeholder="半角数字、ハイフン無し" />
入力欄に ’半角数字、ハイフン無し’ が初期値として表示されます。
フィールドをフォーカスするか、入力を始めると消えます。



対応ブラウザ
Internet Explorerは 壊滅です。やっと IE10 からサポートされました。
当方はIE10 とFirefox25 で動作確認をしました。placeholderの詳しいブラウザ対応状況は
こちらを(http://www.findmebyip.com/litmus/)参考にしてください。

★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気のWordpressも簡単インストール★

イオンショップ

サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>placeholder属性</title>
</head>
<body>
 <form action="*">
  <fieldset>
   <label>電話番号:
    <input type="text" placeholder="半角数字、ハイフン無し" size="25" />
   </label>
     <br />
   <label>利用感想: 
    <textarea rows="3" cols="20" placeholder="10文字以上で"
     style="vertical-align:top"/></textarea>
   </label>
  </fieldset>
 </form>
</body>
</html>
        
placeholder="属性値"
属性値には <input type="text">や、<textarea>の入力欄にユーザーの入力をサポートする
テキストを入れます。これが初期表示されます。非対応のブラウザ用に
title属性を併用するのが良いかもしれません。
<input type="text" placeholder="半角英数で入力" title="半角英数で入力"/>
   
posted by javaScript at 21:46 | 大阪 ☁ | HTML タグ 要素 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。