1

画像の説明をここに入力
↑イメージはこんなかんじです

jquery/jquery-ui可です。

input[type=text]の下に目印をつけ、その情報をさんぷる[目印]さんぷるというフォーマットで取得するにはどうしたらよいでしょうか。

目印を付けてドラッグ出来るようにすることはできましたが、文字と文字の間にしかおけないキャレットと同じような振る舞いにすることができません。
目印の位置からどの文字の間に位置するかというのもできません。

たすけてください。

1
  • 4
    できた部分まではソースを載せてもらえると労力が少なくてありがたいのですが・・・
    – kotatsu
    Commented 2015年4月13日 0:48

1 件の回答 1

1

難しいのは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);
});

後はドラッグした時や情報を取得する時に、座標判定すればなんとかなると思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。