x-editable使用小结——用于网页文本即时编辑

最新推荐文章于 2025-05-14 10:03:42 发布

K先森~

最新推荐文章于 2025-05-14 10:03:42 发布

阅读量1.6w

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习

本文链接：https://blog.csdn.net/willbkimps/article/details/62107379

前端学习专栏收录该内容

1 篇文章

订阅专栏

x-editable是一款用于网页文本即时编辑的工具，提供美观的界面。要使用它，首先需要从官网下载JS和CSS文件。通过集成，可以实现网页元素的便捷编辑功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.介绍

x-editable用于即时编辑网页文本，界面美观，非常好用。

x-editable官网：http://vitalets.github.io/x-editable/

x-editable学习推荐网站：http://www.cnblogs.com/landeanfen/p/5821192.html

使用x-editable首先需要在官网下载js和css。

其样式如下：

2.使用小结

需要bootstrap-editable.css和bootstrap-editable.min.js，好像依赖jquery和bootstrap。

html如下：

<a href="#" id="username">superuser</a>

js如下：

$(document).ready(function() {
    $('#username').editable();
});

设置文本框中的值：

$("#username").editable('setValue', value)

清空文本框中的值：

$("#username").editable('setValue', null).removeClass('editable-unsaved');

获取文本框中的值：

var username = $("#username").editable('getValue', true);

发送请求即时改变文本值：

$('#username').editable({
			type : 'text',
			placeholder: '请输入用户名',
			url : function(params) {
				return $.post(...);
			},
			validate : function(value) {
				if (value == '') {
					return '不能为空';
				}
			}
		});

通过params.value可以拿到文本框中的值。