↑イメージはこんなかんじです
jquery/jquery-ui可です。
input[type=text]
の下に目印をつけ、その情報をさんぷる[目印]さんぷる
というフォーマットで取得するにはどうしたらよいでしょうか。
目印を付けてドラッグ出来るようにすることはできましたが、文字と文字の間にしかおけないキャレットと同じような振る舞いにすることができません。
目印の位置からどの文字の間に位置するかというのもできません。
たすけてください。
↑イメージはこんなかんじです
jquery/jquery-ui可です。
input[type=text]
の下に目印をつけ、その情報をさんぷる[目印]さんぷる
というフォーマットで取得するにはどうしたらよいでしょうか。
目印を付けてドラッグ出来るようにすることはできましたが、文字と文字の間にしかおけないキャレットと同じような振る舞いにすることができません。
目印の位置からどの文字の間に位置するかというのもできません。
たすけてください。
難しいのはinput[type="text"]
に入力されている文字ごとの座標(や幅など)を取得することだと思いますが、とりあえず1文字ごとの座標や幅を取得できる汎用の関数として以下を定義できます。(Chromeでしか試していませんが。)
(function($) {
$.fn.mapForEachChar = function(callback) {
var $hidden = this.data("mapForEachChar.$hidden");
if(!$hidden) {
$hidden = $("<div>");
this.data("mapForEachChar.$hidden", $hidden);
$hidden.get(0).style = $.extend(
true, $hidden.get(0).style, getComputedStyle(this.get(0), "")
);
$hidden.css({
position: "absolute", width: 0, height: 0, overflow: "hidden",
visibility: "hidden", whiteSpace: "nowrap"
});
}
return (
$hidden.html(
$.map(this.val().split(""), function(c) {
return "<span>" + c + "</span>";
}).join("")
).appendTo(document.body).children().map(callback).get()
);
};
})(jQuery);
これはこんな感じに使えます。
$(function() {
var pos = $("#textbox").mapForEachChar(function() {
return this.offsetLeft;
});
console.log(pos);
var wid = $("#textbox").mapForEachChar(function() {
return this.offsetWidth;
});
console.log(wid);
});
後はドラッグした時や情報を取得する時に、座標判定すればなんとかなると思います。