我想知道是否可以在JS中執行此操作: 我想使某些文本框具有某種寬度。但我想添加控件,以便用戶可以簡單地改變它的寬度和位置。 我希望能夠在我的學校自動化文憑印刷,並且我需要在填寫表格時進行快速簡單調整的工具。Javascript中的可變寬度文本框
-2
A
回答
0
查看interact.js及其示例。
記住,你可以調整本地元素<textarea>
此:
結合起來,並interact.js的拖曳功能,和你做。
這是一段代碼:標有// *
的行是我添加的,否則這個示例完全來自interact.js網站。
我添加的那些行,所以如果鼠標在「縮放工具矩形」
// target elements with the "draggable" class
interact('.draggable')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
// call this function on every dragend event
onend: function (event) {
var textEl = event.target.querySelector('p');
textEl && (textEl.textContent =
'moved a distance of '
+ (Math.sqrt(event.dx * event.dx +
event.dy * event.dy)|0) + 'px');
}
});
function dragMoveListener (event) {
var rel_x = event.clientX - event.target.getBoundingClientRect().left; // *
var rel_y = event.clientY - event.target.getBoundingClientRect().top; // *
var w = event.target.offsetWidth; // *
var h = event.target.offsetHeight; // *
var threshold = 20; // *
if(rel_x > w - 20 && rel_y > h - 20) return; // *
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener;
#drag-1, #drag-2 {
width: 25%;
height: 100%;
min-height: 6.5em;
margin: 10%;
font-family: monospace;
color: black;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
#drag-me::before {
content: "#" attr(id);
font-weight: bold;
}
<script src="http://code.interactjs.io/v1.2.6/interact.min.js"></script>
<textarea id="drag-1" class="draggable">
<p> You can drag one element </p>
</textarea>
<textarea id="drag-2" class="draggable">
<p> with each pointer </p>
</textarea>
+0
感謝Weary Adventurer!就是這個! – Zoran
+0
@Zoran請務必填寫此答案並接受它,如果它解決了您的問題。 –
相關問題
- 1. 如何在jQuery對話框中顯示固定寬度文本框中的可變長度文本
- 2. rails/css:可變寬度文本輸入
- 3. 自動文本框寬度
- 4. 文本框寬度與文本
- 5. 在Javascript中查找文本寬度
- 6. 在塊元素中限制邊框寬度爲文本寬度
- 7. 文本框的寬度jQuery手機
- 8. 增加文本框內的寬度Icon.ToolbarAndroid
- 9. 鎖定文本框的寬度
- 10. GWT:如何獲得文本框中文本的寬度?
- 11. 重新設計JQueryMobile - 改變文本框的寬度
- 12. 在Emacs Lisp中包裝可變寬度文本
- 13. 如何中心對可變寬度圖像多行文本
- 14. 如何根據預先確定的文本動態調整文本框高度,但是頁面寬度可變
- 15. 菜單欄文本的寬度是可變的
- 16. 將Windows窗體文本框文本寬度與GDI寬度相關聯
- 17. Onclick展開文本框寬度
- 18. jqtransform - 設置文本框寬度
- 19. HTML,CSS - 使文本框寬度相同
- 20. 文本框寬度問題 - ASP.NET
- 21. WPF:文本框寬度指南
- 22. 居中子菜單下的父寬度可變寬度項目
- 23. 如何在gnuplot中生成可變框寬度的盒須圖?
- 24. ggplot2 barplot中的可變寬度條R
- 25. 在Matlab中可變寬度的線條
- 26. 表格中的可變寬度列
- 27. 單元格寬度=文本寬度FPDF
- 28. Horizontallist可變寬度
- 29. 忽略寬度可變
- 30. Bxslider可變/增量寬度
你做了什麼裏面我們不要拖到元素?顯示代碼。 –
使用textarea,大多數瀏覽器允許您調整它的大小 –
我還沒有顯示代碼。我仍然在學習JS,並且這個項目將來也是如此。我認爲textarea不會這樣做,因爲我認爲它只能被改變,並且正確。 – Zoran