エンジニアのひよこ_level10

【毎日更新!】新卒3年目エンジニアブログです! プログラムだけじゃなく、マネジメントとかも書いていきたい!

【HTML】要素をテキスト入力可能にする属性contenteditable【629日目】

divとかの文字を変えたい

既存のページとかで、たまに文字変えたいなと思うときがありませんか。

いつも、開発者ツールとかで書き換えたりしてますか。

contenteditable

<div contenteditable=true>

contenteditableという属性を持つと、その属性を持った要素は、クリックとかすると、文字入力が可能になります。

以下に、このようなタグを置いておいたので、クリックして試してみてください。

<div contenteditable=true>変更可能だよ</div>

<div contenteditable=false>これはだめだよ</div>
変更可能だよ
これはだめだよ

JSで付与してみよう

JavaScriptや、開発者ツールで、ためしにcontenteditableを付与してみましょう。

かなり乱暴ですが、タグにこの属性をもたせれば、
全部のコンテンツが文字入力可能になりますね。

<body contenteditable=true>

こんなふうにページを書き換えてみてください。

楽しいことになりますよ。

何が嬉しい?

・・・正直使いみちはあまり見えてないので、良い使い道知ってる方は教えてくださると助かります!