javascript实现鼠标点击文本后变为输入框
有不少页面应用中会有这样的情境:当鼠标放到一段文本并点击时,会隐藏当前文本,然后显示出一个编辑框,可用来对现在文本进行编辑。当鼠标在其他地方点击时,恢复到原来的文本显示,效果如下:
原始文本:
鼠标点击后如下:
我这里实现思路是:开始时有一个<p></p>用于最初文本的显示。当点击后,此标签的display被设置为none,同时创建两个新的元素:input和button。代码如下:
初始的页面效果代码:
<td class="noborder" colspan="2">
<div class="smallpicdiv" style="margin-left: 20px;">
<a href="../Item/ItemDetail?numIid=@item.NumIid" title="查看宝贝详情" target="_blank">
<img src="@item.PicUrl" class="smallpic" alt="点击查看宝贝详情" />
</a>
</div>
@{
var titleId = "item_" + @item.NumIid;
}
<div style="float: left;">
<p id="@titleId" class="itemTitleBg" onmouseover="showBgColor(this)"
onmouseout="hiddenBgColor(this)" title="编辑" onclick="hiddenEle('@item.NumIid');" >@item.Title</p>
</div>
</td>
对应的js代码如下,在注释中有详细的说明:
// 获得初始文本,设置为隐藏,然后判断是否已有输入域,如果没有则创建输入框
function hiddenEle(id) {
var titleP = document.getElementById("item_" + id);
titleP.style.display = "none";
if (!document.getElementById("title_input_" + id)) {
buildEditDiv(titleP.parentNode, id);
}
}
//创建输入框和保存按钮
function buildEditDiv(titleDiv, id) {
var editText = document.createElement("input");
var titleP = document.getElementById("item_" + id);
var oldTitle = titleP.firstChild.data;
editText.setAttribute("class", "newItemTitle");
editText.setAttribute("type", "text");
editText.value = oldTitle;
editText.name = id;
editText.id = "title_input_" + id;
titleDiv.appendChild(editText);
titleDiv.appendChild(document.createElement("br"));
var submitButton = document.createElement("button");
submitButton.appendChild(document.createTextNode("保存"));
submitButton.id = "title_button_" + id;
submitButton.onclick = function () {
ajaxChangeTitle(id, oldTitle, editText.value);
return false;
}
//这里输入框失去焦点后,设置了等待时间200ms才执行删除input和button操作,主要是为了在删除input之前,在button的onclick动作中能获得input的新值。
editText.onblur = function () {
setTimeout(function () {
titleDiv.removeChild(submitButton);
titleDiv.removeChild(titleDiv.lastChild);
titleDiv.removeChild(editText);
titleP.style.display = "";
}, 200);
}
titleDiv.appendChild(submitButton);
editText.focus();
}
function ajaxChangeTitle(id, oldTitle, newTitle) {
var titleP = document.getElementById("item_" + id);
titleP.firstChild.data = newTitle;
$.ajax(
{
url: '/TopDemo/Item/UpdateTitle',
data: '{"iid":"' + id + '", "newTitle":"' + newTitle + '" }',
type: "POST",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) {
if (data == null || data.length == 0 || data == "false") {
updateTitleError(id, oldTitle);
}
},
error: function (data) {
updateTitleError(id, oldTitle)
}
});
}
function updateTitleError(id, oldTitle) {
var titleP = document.getElementById("item_" + id);
titleP.firstChild.data = oldTitle;
alert("更新宝贝标题失败");
}
function showBgColor(ele) {
ele.setAttribute("class", "itemTitleBg_c");
}
function hiddenBgColor(ele) {
ele.setAttribute("class", "itemTitleBg");
}
这样就实现了简单的动态编辑文本的效果了。
分享到:
相关推荐
主要是对利用javaScript实现点击输入框弹出窗体选择信息进的实例行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
JSP中使用JavaScript动态插入删除输入框实现代码 JSP(Java Server Pages)是一种基于Java技术的服务器端脚本语言,主要用于生成动态网页内容。JavaScript则是一种客户端脚本语言,主要用于实现网页的交互功能。在...
主要介绍了js实现鼠标点击文本框自动选中内容的方法,涉及javascript鼠标点击事件onClick及选择事件select的使用技巧,非常简单实用,需要的朋友可以参考下
用javascript实现的前台文本编辑器
主要介绍了js简单实现表单中点击按钮动态增加输入框数量的方法,涉及javascript鼠标点击事件及insertAdjacentHTML方法的相关使用技巧,需要的朋友可以参考下
用javascript做的文本编辑器.dsfadfddddddddddddddddddddddddddddd
javascript实现鼠标拖动div的效果。。。
Javascript学习-限制多行文本输入框的字符数
范例使用SuperMap iClient 6R for JavaScript开发模式,使用MousePosition控件实现鼠标移动到地图上展示实际的地理坐标。
用JavaScript实现的一个IP地址输入框
javaScript实现点击输入框弹出窗体选择信息,提供源码,希望可以共同学习,不足处请指出,呵呵 -------javascript爱好者,java交流群:166256747,分享自己的技术是一种美德!
JavaScript实现一个输入框组件 本文实例为大家分享了手动实现一个输入框组件的具体代码,供大家参考,具体内容如下 背景 taro h5中想要实现一个样式如下的输入框: 问题: taro组件和taro-ui组件中都没有这种...
JavaScript实现鼠标移入图片放大效果,JavaScript实现鼠标移入图片放大效果,好东西大家共享
点击输入框就出来时间的JavaScript 很好用
世界上最简单的文本编辑器,js,jquery 实现编辑器
jsdiff 一个javascript的文本差异比较实现
jQuery掩码文本输入框 jQuery掩码文本输入框网页特效.zip
这里实现点击单选按钮改变输入框中文本域内容的方法,是一个JavaScript 的简单应用,可以减少用户的输入,提升用户操作易用性,它类似一个TAB选项卡一样的功能,并可以完成后提交表单,值得学习。 运行效果截图如下...
Javascript实现鼠标框选操作 不是点击选取_.docx
javascript实现鼠标旁边的提示信息特效,很实用