SYNCERのロゴ
アイキャッチ画像

DataTransferItem.getAsString() - データを文字列として取得する

getAsString()は、DataTransferItemのメソッドです。データを文字列として取得します。データの種類(kind)が"string"である必要があります。取得したデータはメソッドの返り値として返すのではなく、引数のコールバック関数に渡されます。

概要

名前
getAsString
所属
DataTransferItem
IDL
void getAsString(FunctionStringCallback? _callback);

callback FunctionStringCallback = void (DOMString data);
仕様書
https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransferitem-getasstring

説明

引数(_callback)には、コールバック関数を指定します。

取得したデータの内容は返り値ではなく、コールバック関数の引数として渡されます。

対象の転送データの種類(kind)が"string"ではない場合、取得できません。

チュートリアル

データの内容は、コールバック関数で受け取って下さい。

// 正しい例
dataTransferItem.getAsString( function ( value ) {
	console.log( value ) ;
} ) ;

// 間違いの例
var value = dataTransferItem.getAsString() ;

デモ

DataTransferItem.getAsString()のデモです。テキストや画像、ローカルファイルなどをドロップして、値を比較してみて下さい。ドロップしたファイルが当サイトのサーバーにアップロードされるようなことはありません。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#hoge {
	width: 250px ;
	text-align: center ;
	padding: 24px 12px ;
	background-color: blue ;
	color: #fff ;
}

textarea { width: 250px ; height: 60px ; font-size: 16px ; }
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<p><textarea>SYNCER</textarea></p>
<p><img src="./image.png" width="120" height="120"></p>
<hr>
<div id="hoge">drop here!</div>
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;

var callbackFn1 =  function ( event ) {
	event.preventDefault() ;
} ;

var callbackFn2 =  function ( event ) {
	event.preventDefault() ;

	var dataTransferItemList = event.dataTransfer.items ;

	console.log( dataTransferItemList ) ;

	resultElement.innerHTML = "" ;
	resultElement.appendChild( document.createTextNode( dataTransferItemList.length + "個のデータがあります。" + "\n\n" ) ) ;

	for ( var i=0,l=dataTransferItemList.length; l>i; i++ ) {
		resultElement.appendChild( document.createTextNode( "[" + i + "] " + dataTransferItemList[i] + "\n" ) ) ;
		resultElement.appendChild( document.createTextNode( "\tkind: " + dataTransferItemList[i].kind + "\n" ) ) ;
		resultElement.appendChild( document.createTextNode( "\ttype: " + dataTransferItemList[i].type + "\n" ) ) ;
		callbackFn3( dataTransferItemList[i], document.createTextNode( "" ) ) ;
	}
} ;

var callbackFn3 = function ( dataItem, textNode ) {
	resultElement.appendChild( textNode ) ;

	dataItem.getAsString( function ( value ) {
		textNode.data = "\tgetAsString(): " + value + "\n\n" ;
	} ) ;
}

element.ondragover = callbackFn1 ;
element.ondrop = callbackFn2 ;

var resultElement = document.getElementById( "result" ) ;
</script>

</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
30+ 50+×× 12+××
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月11日 (水)
コンテンツを公開しました。