本文将介绍javascript–如何在可编辑的div中将光标设置在给定的位置的详细情况，特别是关于js设置光标位置到框内的相关信息。我们将通过案例分析、数据研究等多种方式，帮助您更全面地了解这个主题，
本文将介绍javascript – 如何在可编辑的div中将光标设置在给定的位置的详细情况，特别是关于js设置光标位置到框内的相关信息。我们将通过案例分析、数据研究等多种方式，帮助您更全面地了解这个主题，同时也将涉及一些关于javascript – Dojo Grid – 在可编辑和不可编辑之间切换、javascript – React autoFocus将光标设置为输入值的开头、javascript – 使用密钥代码在可滚动div中上下导航、javascript – 可编辑的组合框的知识。
本文目录一览：- javascript – 如何在可编辑的div中将光标设置在给定的位置（js设置光标位置到框内）
- javascript – Dojo Grid – 在可编辑和不可编辑之间切换
- javascript – React autoFocus将光标设置为输入值的开头
- javascript – 使用密钥代码在可滚动div中上下导航
- javascript – 可编辑的组合框
javascript – 如何在可编辑的div中将光标设置在给定的位置（js设置光标位置到框内）
我有一个div
<div id="user_status"onkeyup="username_Search('New','user_status');" contenteditable="true" data-text="What's on your mind?...">
Some Text will goes Here.
</div>
当username_Search函数调用时,它的光标位于0位置.而我需要保持光标在其实际位置.我可以在调用此函数之前获取光标位置.但无法设定.
蚂蚁有解决方案吗？
解决方法
如果您使用的是Chrome或Firefox,则以下代码可以很好地完成任务.此代码未在IE或Safari中测试过.
setCaretPosition函数是你想要的
function getcaretposition(editableDiv) {
var caretPos = 0,containerEl = null,sel,range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
if (range.commonAncestorContainer.parentNode == editableDiv) {
caretPos = range.endOffset;
}
}
}
return caretPos;
}
function setCaretPosition(ctrl,pos) {
if (window.getSelection) {
pos = (ctrl.textContent.length > pos ? pos : ctrl.textContent.length);
var selection = window.getSelection();
var range = document.createrange();
range.selectNodeContents(ctrl.childNodes[0]);
range.endOffset = pos;
selection.removeAllRanges();
selection.addRange(range);
selection.collapse(ctrl.childNodes[0],pos);
}
}
function username_Search(st,str)
{
var ctl = document.getElementById('user_status');
var pos = getcaretposition(ctl);
document.getElementById("user_status").textContent
= "dsdssadsadasdffstjdyjdrtyurtystseryds";
setCaretPosition(ctl,pos);
}
<div id="user_status"onkeyup="username_Search('New','user_status');" contenteditable="true" data-text="What's on your mind?...">
Some Text will goes Here.
</div>
javascript – Dojo Grid – 在可编辑和不可编辑之间切换
我有一个网格,可以根据更大的树结构编辑小块数据.为了更容易知道用户保存了什么,我希望当用户第一次看到网格时,网格处于不可编辑状态.当用户准备好后,他们可以单击编辑按钮,这将使网格的某些部分可编辑.然后,有一个保存或取消按钮可以保存更改或还原.
在大多数情况下它是有效的.但是,如果单击“编辑”,请不要更改任何内容,单击“保存”,然后再次单击“编辑”,则无法编辑网格中的数据,并且在某些情况下会收到“ItemFileWriteStore中的断言失败”消息.如果单击取消按钮,也会发生这种情况.有时,单击取消按钮后,网格中的所有数据也将消失.
下面,我已经包含了重现我所看到的问题的最小代码块.有没有人在那里见过这个问题并且能够修复它,或者我在我的代码中做错了导致这个特殊问题？
谢谢.
<html>
<head>
<title>Dojo Grid Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/grid/resources/tundraGrid.css">
<script>
dojo.require("dojo.data.ItemFileWriteStore")
dojo.require("dojox.grid.cells.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.grid.cells");
var attCodeStore = null;
var containerGrid = null;
function editTable() {
var theStructure = containerGrid.structure;
theStructure[1].editable = true;
theStructure[2].editable = true;
containerGrid.setStructure(theStructure);
toggleButtons();
}
function saveTable() {
var theStructure = containerGrid.structure;
theStructure[1].editable = false;
theStructure[2].editable = false;
containerGrid.setStructure(theStructure);
attCodeStore.save();
toggleButtons();
}
function cancelTable() {
var theStructure = containerGrid.structure;
theStructure[1].editable = false;
theStructure[2].editable = false;
containerGrid.setStructure(theStructure);
attCodeStore.revert();
toggleButtons();
}
function toggleButtons() {
if (dojo.hasClass("editButton", "dijitHidden")) {
dojo.removeClass("editButton", "dijitHidden");
dojo.addClass("saveButton", "dijitHidden");
dojo.addClass("cancelEditButton", "dijitHidden");
} else {
dojo.addClass("editButton", "dijitHidden");
dojo.removeClass("saveButton", "dijitHidden");
dojo.removeClass("cancelEditButton", "dijitHidden");
}
}
function setupTable() {
var attCodeData = {label:''attribute'',
identifier: ''id'',
items: [
{ id:''itemOneId'',
alias:''itemOneAlias'',
description:''itemOneDescription'',
attribute:''itemOneAttribute''
},
{ id:''itemTwoId'',
alias:''itemTwoAlias'',
description:''itemTwoDescription'',
attribute:''itemTwoAttribute''
},
{ id:''itemThreeId'',
alias:''itemThreeAlias'',
description:''itemThreeDescription'',
attribute:''itemThreeAttribute''
},
{ id:''itemFourId'',
alias:''itemFourAlias'',
description:''itemFourDescription'',
attribute:''itemFourAttribute''
},
]
};
attCodeStore = new dojo.data.ItemFileWriteStore({data:attCodeData})
console.log(attCodeStore);
console.log(attCodeData);
containerGrid = new dojox.grid.DataGrid({
store: attCodeStore,
clientSort: true,
autoHeight: true,
structure: [
{field: ''attribute'', width: ''100px'', name: ''Attribute''},
{field: ''alias'', width: ''100px'', name: ''Alias''},
{field: ''description'', width: ''auto'', name: ''Description''}
]
});
dojo.byId("gridDiv").appendChild(containerGrid.domNode);
containerGrid.startup();
}
dojo.addOnLoad(function(){
setupTable();
})
</script>
</head>
<body>
<div id="gridArea">
<div>
<input type="button" value="Edit" id="editButton" onclick="editTable()"/>
<input type="button" value="Save" id="saveButton" onclick="saveTable()"/>
<input type="button" value="Cancel" id="cancelEditButton" onclick="cancelTable()"/>
</div>
</div>
<div id="gridDiv"></div>
</body>
</html>
解决方法:
想出这个(尽管花了一点时间).事实证明,当您单击可编辑网格中的条目时,网格将进入编辑状态. (有道理.)然而,当我在网格处于编辑状态时保存数据存储时,它并没有改变网格的状态.下次我点击编辑并将网格带回到我认为可以开始编辑的位置时,网格认为它仍在编辑之前选择的单元格,并且只会发送该单元格信息.
当我在saveTable和cancelTable方法的开头放置以下代码时,所有代码都按预期工作：
if (containerGrid.edit.isEditing()) {
containerGrid.edit.apply();
}
希望这个答案可以在一段时间后拯救别人.
谢谢.
总结
以上是小编为你收集整理的javascript – Dojo Grid – 在可编辑和不可编辑之间切换全部内容。
如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。
原文地址：https://codeday.me/bug/20190606/1189858.html
javascript – React autoFocus将光标设置为输入值的开头
我有一个控制输入,最初显示的值.
我已将该输入设置为autoFocus,但是当我希望它在最后出现时,光标出现在输入的开头.我理解这可能是因为autoFocus是在值之前添加的,但我不是100％肯定.
我已将该输入设置为autoFocus,但是当我希望它在最后出现时,光标出现在输入的开头.我理解这可能是因为autoFocus是在值之前添加的,但我不是100％肯定.
在输入字段结束时完成光标初始化的最佳方法是什么？
var Test = React.createClass({
getinitialState: function() {
return {
teamId: 'fdsfds'
};
},render: function() {
return (
<input type="text" autoFocus value={this.state.teamId} onChange={this.setTeamId} />
);
},setTeamId: function(event) {
this.setState({ teamId: id });
},});
ReactDOM.render(
<Test />,document.getElementById('container')
);
https://jsfiddle.net/69z2wepo/34486/
解决方法
一个解决方案
<input
type="text"
autoFocus
value={this.state.teamId}
onChange={this.setTeamId}
onFocus={function(e) {
var val = e.target.value;
e.target.value = '';
e.target.value = val;
}}
/>
https://jsfiddle.net/o3s05zz4/1/
适应这个答案：https://stackoverflow.com/a/2345915/1589521
javascript – 使用密钥代码在可滚动div中上下导航
我有一个可搜索的文本框,用搜索结果填充div. div是可滚动的.我想要实现的是通过页面向上和向下导航结果项目(键码38和40).但是一旦我尝试这个,整个div就会滚动,结果项本身不会采用新选择的css类.
下面是我的一些代码
this.TagNavigation = function (event) {
var div = $("#TagSearchResults");
var anchors = $("#TagSearchResults a");
var selectedAnchor = $("#TagSearchResults a.selected");
var position = anchors.index(selectedAnchor);
if (event.keyCode == "13" && anchors.length > 0) {
FRAMEWORK.AddUpdateInterventionTags(selectedAnchor.attr("id").split("-")[1] + "|" + selectedAnchor.text(), "add");
}
if (event.keyCode == "13" && anchors.length == 0 && $("#txtTagSearch").val() != "Start typing to search Tags") {
FRAMEWORK.AddNewTag($("#txtTagSearch").val());
}
else if (event.keyCode == "38") {
if (position > 0) {
canClose = false;
selectedAnchor.removeClass("selected");
var newSelectedAnchor = $(anchors.get(position - 1));
newSelectedAnchor.addClass("selected");
$("#txtTagSearch").val(newSelectedAnchor.text());
}
}
else if (event.keyCode == "40") {
if (position <= anchors.length) {
canClose = false;
selectedAnchor.removeClass("selected");
var newSelectedAnchor = $(anchors.get(position + 1));
newSelectedAnchor.addClass("selected");
$("#txtTagSearch").val(newSelectedAnchor.text());
//newSelectedAnchor.focus();
}
}
};
this.AjaxSearch = function (text) {
var div = $("#TagSearchResults");
var anchors = $("#TagSearchResults a");
var selectedAnchor = $("#TagSearchResults a.selected");
var position = anchors.index(selectedAnchor);
if (event.keyCode == "13") {
FRAMEWORK.TagNavigation(event);
}
else if (event.keyCode == "38") {
FRAMEWORK.TagNavigation(event);
}
else if (event.keyCode == "40") {
FRAMEWORK.TagNavigation(event);
}
else if (text.length >= 3) {
FRAMEWORK.RenderSearchResults(text);
}
else {
$("#TagSearchResults").html("");
$("#TagSearchResults").hide();
}
};
正如您在TagNavigation函数(键代码40)中看到的,我尝试将焦点设置在活动元素上,但仍然没有成功.
请帮忙.
解决方法:
您需要检查天气,新选择的元素的Y值高于包含div的底部.如果是这样,则将div按新元素的高度滚动.将您的’if(event.keyCode ==“40”)’语句更改为以下内容：
this.TagNavigation = function (event) {
var div = $("#TagSearchResults");
var anchors = $("#TagSearchResults a");
var selectedAnchor = $("#TagSearchResults a.selected");
var position = anchors.index(selectedAnchor);
if (event.keyCode == "13" && anchors.length > 0) {
FRAMEWORK.AddUpdateInterventionTags(selectedAnchor.attr("id").split("-")[1] + "|" + selectedAnchor.text(), "add");
}
if (event.keyCode == "13" && anchors.length == 0 && $("#txtTagSearch").val() != "Start typing to search Tags") {
FRAMEWORK.AddNewTag($("#txtTagSearch").val());
}
else if (event.keyCode == "38") {
if (position > 0) {
canClose = false;
selectedAnchor.removeClass("selected");
var newSelectedAnchor = $(anchors.get(position - 1));
newSelectedAnchor.addClass("selected");
$("#txtTagSearch").val(newSelectedAnchor.text());
var newSelectedAnchorPosistion = newSelectedAnchor.offset();
var divPosition = div.offset();
divPosition = divPosition.top;
if (newSelectedAnchorPosistion.top + 1 > divPosition) {
var newPos = div.scrollTop() - newSelectedAnchor.outerHeight();
div.scrollTop(newPos);
}
}
}
else if (event.keyCode == "40") {
if (position < anchors.length - 1) {
canClose = false;
selectedAnchor.removeClass("selected");
var newSelectedAnchor = $(anchors.get(position + 1));
newSelectedAnchor.addClass("selected");
$("#txtTagSearch").val(newSelectedAnchor.text());
var newSelectedAnchorPosistion = newSelectedAnchor.offset();
var divPosition = div.offset();
divPosition = divPosition.top + div.outerHeight();
if (newSelectedAnchorPosistion.top + 1 >= divPosition) {
var newPos = div.scrollTop() + newSelectedAnchor.outerHeight();
div.scrollTop(newPos);
}
}
}
};
javascript – 可编辑的组合框
我必须创建一个可编辑的组合框.组合框包含名称,年龄和城市.用户可以输入姓名,年龄或城市.组合框必须过滤所有列表包含,并应显示相对列表.
例如：
ComboBox contains : xxx 23 ny, yyy 24 London, zzz 25 delhi, uuu 25 columbo. Here user enter 25 : combo Box has to show zzz and uuu rec
解决方法:
你想要的是JQuery’s autocomplete(demo and updated docs)小部件.
查看combo box示例
今天关于javascript – 如何在可编辑的div中将光标设置在给定的位置和js设置光标位置到框内的讲解已经结束，谢谢您的阅读，如果想了解更多关于javascript – Dojo Grid – 在可编辑和不可编辑之间切换、javascript – React autoFocus将光标设置为输入值的开头、javascript – 使用密钥代码在可滚动div中上下导航、javascript – 可编辑的组合框的相关知识，请在本站搜索。
本文标签：
![[转帖]Ubuntu 安装 Wine方法（ubuntu如何安装wine）](https://www.gvkun.com/zb_users/cache/thumbs/4c83df0e2303284d68480d1b1378581d-180-120-1.jpg)
