Jquery красивое поле ввода

jumancy · October 4, 2011

Помогите пожалуйста, задача состоит в том, чтоб можно было редактировать название при любом клике.

Примерный код можно видеть здесь

Нажали на название вылез инпут для редактирование. Надо чтобы обратно при клике (и в инпуте и в любом другом месте название сохранялось, т.е. обработалась форма - это будет

$('#myform').submit()

)

Edited October 4, 2011 by jumancy

psywalker · October 4, 2011

On 10/4/2011 at 5:36 AM, jumancy said:
Помогите пожалуйста, задача состоит в том, чтоб можно было редактировать название при любом клике.
Примерный код можно видеть здесь
Нажали на название вылез инпут для редактирование. Надо чтобы обратно при клике (и в инпуте и в любом другом месте название сохранялось, т.е. обработалась форма - это будет
$('#myform').submit()
)

У поля, которое будет появляться и исчезать, сделай свойство, куда сохраняй его текст.

Gold Dragon · October 4, 2011

вот написал маленький примерчик

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Изменение поля</title>
	<script src="jquery.js" type="text/javascript"></script>
</head>

<body>
<div>
	<span id="text">Название</span><input id="but" type="button" value="Редактировать"/>
</div>
<script type="text/javascript">
	$(function() {
		$("#but").click(function() {
			if($("#but").val()=='Редактировать'){
				$("#text").html('<input type="text" name="text" id="inptext" value="' + $("#text").text() + '" />');
				$("#but").val("Сохранить");
			}else{
				$("#text").text($("#inptext").val());
				$("#but").val("Редактировать");
			}
			return false;
		});
	});
</script>
</body>
</html>

Edited October 4, 2011 by Gold Dragon

mishka · October 4, 2011

Я это так представляю:

Поле редактирование появляется не на клик по тексту. При ховере на текст появляется кнопочка, при клике на которую можно редактировать текст.

Мне это кажется удобным, а там сами смотрите.

Вобщем каким образом вы попадете на инпут - вам решать.

Опять таки сохранял бы я изменения при клике на кнопку, а не при потере инпутом фокуса.

Вдруг я что-то скопировать хочу на странице?

Сам тег формы можно и не создавать.

Потом новое значение переносить в тот тег который отображает текст и аяксом отправить это значение на серв, чтобы там это тоже сохранилось.

Если вы хотите

Quote
Надо чтобы обратно при клике (и в инпуте и в любом другом месте название сохранялось, т.е. обработалась форма - это будет

То вам это нужно делать при потере инпутом фокуса.

Gold Dragon · October 4, 2011

не совсем верно сохранять какие-либо данные при потере фокуса.. Процесс должен контролироваться, а потеря фокуса может произойти по многим причинам и даже без контроля со стороны пользователя. К тому же что значит обработка формы?

mishka · October 4, 2011

On 10/4/2011 at 7:50 AM, Gold Dragon said:
К тому же что значит обработка формы?

Я так понял что человек под этим подразумевал отправку новых значений на сервер.

Gold Dragon · October 4, 2011

ну тогда просто добавить в мой код GET или POST запрос на сервер..

Но сразу хочу вернуться к безопасности данных и кода.. При таком раскладе желательно (у себя бы я сделал обязательным) при редактировании получать значение не из текстового поля, а из базы где это значение хранится.

mishka · October 4, 2011

On 10/4/2011 at 8:03 AM, Gold Dragon said:
ну тогда просто добавить в мой код GET или POST запрос на сервер..
Но сразу хочу вернуться к безопасности данных и кода.. При таком раскладе желательно (у себя бы я сделал обязательным) при редактировании получать значение не из текстового поля, а из базы где это значение хранится.

А это будет происходить с перезагрузкой странички?

Gold Dragon · October 4, 2011

mishka said:
А это будет происходить с перезагрузкой странички?

зачем? просто добавим к примеру после этого

 $("#but").val("Редактировать");

это

$.get('saveform.php', {name , $("#text").text($("#inptext").val())});

и соответственно в фале saveform.php получаем $_GET['name']... и в общем делаем с данными что нужно

Edited October 4, 2011 by Gold Dragon

jumancy · October 4, 2011

Спасибо всем, надо было использовать метод blur

Никаких проблем не возникает потому что у всех элементах есть уникальные ID. ayax-сом через id получается значение инпута и отправляется

Gold Dragon · October 4, 2011

я уже объяснял почему фокус это не самый лучший способ.. Если не нравится кнопка (хотя ей любой стиль можно сделать), то можно сделать маленькую картинку или ссылку. Но лучше принудительно сохранять

Edited October 4, 2011 by Gold Dragon

jumancy · October 5, 2011

On 10/4/2011 at 7:50 AM, Gold Dragon said:
не совсем верно сохранять какие-либо данные при потере фокуса.. Процесс должен контролироваться, а потеря фокуса может произойти по многим причинам и даже без контроля со стороны пользователя. К тому же что значит обработка формы?

Я вас понимаю, но для данного проекта это даже очень подходит. У фотографии есть название (оно в блоке - НЕ инпут). когда на него кликаешь появляется инпут для редактирования. При потере фокуса сохраняется и обратно превращается на блок. Я не думаю что, такой прием (с потерей фокуса) приведет к каким то фатальному результату.

Gold Dragon · October 5, 2011

нет конечно всё зависит от проекта

Sign In

Jquery красивое поле ввода

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information