HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLcontenteditable属性

HTMLのcontenteditable属性は、ブール値trueまたはfalseを使用してコンテンツを編集可能かどうかを設定するために使用されます。この属性はグローバル属性であるため、どの要素でも使用できます。

以下は構文です-

<element contenteditable =”true|false”>

上記で、要素を編集可能にする場合はtrueに設定し、そうでない場合はfalseに設定します。

ここで、HTMLでcontenteditable属性を実装する例を見てみましょう-

例

<!DOCTYPE html>
<html>
<body>
   <h2 contenteditable="true">Demo Heading</h2>
   <p contenteditable="true">This is a demo line.</p>
</body>
</html>

出力

これにより、次の出力が生成されます。見出しとp要素の表示が編集可能になりました-

HTMLcontenteditable属性

これで、見出しとコンテンツを編集できます。したがって、見出しを変更してスクリーンショットを表示しましょう-

HTMLcontenteditable属性

上記の例では、見出しとテキストを設定しています-

<h2 contenteditable="true">Demo Heading</h2>
<p contenteditable="true">This is a demo line.</p>

contenteditableプロパティを使用して、見出しとコンテンツを編集可能にしました。 trueに設定すると、Webページ自体で編集できるようになります-

h2 contenteditable="true"

  1. HTMLラップ属性

    HTML wrap属性は、フォームがHTMLドキュメントで送信されたときにテキスト領域のテキストをどのように折り返すかを定義します。 構文 以下は構文です- <textarea wrap=”hard | soft”></textarea> HTMLラップ属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <style>    body {       color: #000;       height:

  2. HTMLドラッグ可能属性

    HTML DOMドラッグ可能属性は、要素がドラッグ可能かどうかを指定するブール値を返す/設定します。 注 −リンクと画像はデフォルトでドラッグ可能です。 HTMLドラッグ可能の例を見てみましょう 属性- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM draggable</title> <style>    * {       padding: 2px;       margin:5px; &n