如何在点击位置开始编辑contenteditable

时间:2016-01-08 21:10:57

标签: javascript jquery html jquery-ui contenteditable

报表设计器包含可编辑,可调整大小和可拖动的字段。

单击字段将光标置于字段结束编辑的开始处,始于字段的开头。 如何将光标放在字段中以点击位置,以便在点击位置开始编辑?

使用jquery,jquery ui,bootstarp,ASP.NET MVC4。



<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <style>
    .panel-resizable {
      min-height: 1px;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }
    .panel {
      margin-bottom: 0;
    }
    .verticalline,
    .horizontalline,
    .rectangle {
      font-size: 1pt;
      border: 1px solid #000000;
    }
    .field {
      border: 1px solid #000000;
      white-space: pre;
      overflow: hidden;
    }
    .captionfield {
      white-space: pre;
      overflow: hidden;
    }
    .field,
    .captionfield {
      font-family: "Times New Roman";
      font-size: 10pt;
    }
    .verticalline {
      border-left-style: none !important;
    }
    .horizontalline {
      border-bottom-style: none !important;
    }
  </style>
  <script>
    $(function() {
      $(".panel-resizable").resizable({
        minWidth: "100%",
        maxWidth: "100%",
        minHeight: 1
      });
      $(".verticalline, .horizontalline, .rectangle, .field, .image, .captionfield").draggable();
      $(".verticalline, .horizontalline, .rectangle, .field, .image").resizable();
    });
  </script>
</head>

<body>
  <div class='panel'>
    <div class='panel-body panel-resizable'>
      <div class='field' contenteditable='true'>IR(&quot;Kreedit arvele nr. &quot;)+iif( isnull(g_server),&#39;&#39;,psql(&#39;select tasudok from dok x where dokumnr= ?dok.krdokumnr&#39;))</div>
      <div class='field' contenteditable='true'>IR(&quot;Kreedit arvele nr. &quot;)+ iif( isnull(g_server), sql(&#39;sele tasudok from dok x where doktyyp+str(dokumnr,7)= &quot;G&quot;+str(dok.krdokumnr,7) &#39;,&#39;&#39;),psql(&#39;select tasudok from dok where dokumnr= ?dok.krdokumnr&#39;))</div>
      <div class='field' contenteditable='true'>vnimi+&#39; &#39;+dok.tasudok</div>
      <div class='field' contenteditable='true'>DOK.kuupaev</div>
    </div>
    <div class='bg-warning'>
      <div class='panel-footer'>GroupHeader 1: str(dokumnr)+str(koopia,2)</div>
    </div>
  </div>

</body>

</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案