HTML5の覚書 | ワクガンス

テキストエリアのプレースホルダー(入力ヒント記述)に改行とタブを組み込む | placeholder

HTML

	<textarea placeholder="100	ムラサキオカヤドカリ
101	ナキオカヤドカリ" style="width:300px;height:100px"></textarea>
	

2019-1-3

アンカーのdownload属性 | ダウンロード

download属性を記述する

<a href="log/test.log" download="download">TEST</a>

以下のようにdownload属性を記述省略するとhttpsにしたとき、上手くいかないことがある。

<a href="log/test.log" download>TEST2</a>

2019-1-3

videoタグ 動画 mp4

HTML

	<div style="width:300px">
		<video controls width="100%">
			<source src="img/sec4-3.mp4" type="video/mp4">
		</video>
	</div>
	

2021-4-27

Youtube動画を埋め込む

	<iframe
		src="https://www.youtube.com/embed/y9OEKT6gTA0"
		frameborder="0" allowfullscreen width="400px" height="300px">
	</iframe>
	

2019-1-3

ツイッターのタイムラインを埋め込む

下記のURLページにて埋め込みコードを作成できる。
https://publish.twitter.com/#

ユーザー名をメインのテキストボックスに入力すると、タイムラインの埋め込みコードと、ツイートボタンの埋め込みボタンが作成可能。。
例→メインのテキストボックスに「@amaraimusi」と入力→タイムラインかボタンかを選択すると埋め込みコードが表示される。

ボタンの例
Follow @amaraimusi Tweet to @amaraimusi Tweet #amaraimusi ユーザー名をメインのテキストボックスに入力すると、タイムラインの埋め込みコードやその他の埋め込みコードを作成可能。
ハッシュタグでの埋め込みも可能だが、ボタンのみでタイムラインは無理っぽい。
例：「#自然農」と入力してボタンを作成→ Tweet #自然農

2021-11-25

インスタグラムの埋め込み

PC版のインスタでしか埋め込みコードは作成できない。
適当な写真を選び、右上にある「...」から埋め込みコードを取得できる。

埋め込みの例

2021-11-25

datalistの検証: 値取得, jQueryで操作, oninput,onchange, onblur, onclickの動作確認

Demo

HTML

<label for="animal_name">動物リスト:</label>
<input list="animal_dlist" id="animal_name" name="animal_name" 
	oninput="test1('oninput')" 
	onchange="test1('onchange')" 
	onblur="test1('onblur')" 
	onclick="test1('onclick')">
<datalist id="animal_dlist" >
    <option value="イモリ">
    <option value="カエル">
    <option value="サンショウウオ">
    <option value="ヒキガエル">
</datalist>
	

JavaScript

$(()=>{
	// リストに追加
	$('#animal_dlist').append("<option value='赤猫'>");
});

function clickBtn1(){
	let animal_name = $('#animal_name').val();
	$('#res').html(animal_name);
}


function test1(str){
	$('#res2').append(str + '<br>');
}
	

2022-10-22

1つのdatalistを複数のテキストボックスで使いまわす

一つのdatalistを複数のテキストボックスで使いまわすことが可能だ。 ちなみにdatalistは数万件のデータにも対応できている。

Demo

	
	<datalist id="animal_dlist" >
	<?php 
	for($i=0; $i<10000; $i++){
	    echo "<option value='動物テスト{$i}'>";
	}
	   ?>
	</datalist>
	
	<input list="animal_dlist" id="test1" >
	<input list="animal_dlist" id="test2" >
	<input list="animal_dlist" id="test3" >
	<input list="animal_dlist" id="test4" >
	<input list="animal_dlist" id="test5" >
	<input list="animal_dlist" id="test6" >
	<input list="animal_dlist" id="test7" >
	

2022-11-12

xxx

2019-1-3