Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / алтернатива вместо текстового поля + HTML / 25 сообщений из 35, страница 1 из 2
  1  все
14.08.2007, 12:56
    #34726215
michael R
michael R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
есть на странице много текстовых полей по 1000 штук

(разбивка постраничная меньше 1000 на страницу не могу только больше)

в эти текстовые поля вносится информация и она же проверяется сразу же через JavaScript

из-за того что много текстовых полей страница грузится долго (14 сек)
но если не использовать type=text а только TD то загрузка мгновенная

как найти алтернативу текстовому полю с той же функциональностью
или как ускорить загрузку

Спасибо
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 14:05
    #34726575
Блок А.Н.
Блок А.Н.
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
А какую функциоанльность вы используете?
Редактирование?
Может, сделать на какое-нибудь onclick вставку в ячейку поля input
Если поиграться со стилями, можно попробовать это сделать незаметно, особенное если браузер заранее определен.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 14:28
    #34726680
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
michael R , а что потом делаете с введеной информацией?

Мне пока нравится вариант "вычитывания" информации, потом её правка (хоть через промпт), проверка...
----------
Cache for Windows NT (Intel) 5.0.20 (Build 6305) Fri Sep 16 2005 11:54:10 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 14:56
    #34726837
michael R
michael R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
информация вносится как текст из sql + XML+ XSLT+ HTML
и потом возможно исправляется при этом происходит проверка
или число или текст опредлённого вида...
а потом записывается обратно


Блок А.Н.
мне интересно как производить на onclick вставку в ячейку поля input
можно ли какой-нибудь пример со стилями
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 15:11
    #34726890
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
michael R , а такое будет долго грузиться?
Код: plaintext
1.
2.
3.
...
<a href='javascript:Input("текст")'>текст</a>
...
----------
Cache for Windows NT (Intel) 5.0.20 (Build 6305) Fri Sep 16 2005 11:54:10 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 15:24
    #34726951
michael R
michael R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
функция Input что делает
хотя в принципе можно и без линка только на onclick
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 16:09
    #34727177
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
michael Rфункция Input что делает
Вот она-то и будет выполнять редактирование произвольного текста, проверку и запись в БД...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 16:22
    #34727233
michael R
michael R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
а вносить текст как
через prompt или ещё одно окно не годится

нужно встраивать в TD текстовое поле как будто оно там и было
с размерами и другими атрибутами
а при потере фокуса чтобы результат сохранялся в TD и поле изчезало
сами TD должны выглядет как текстовые поля выделенный прямоугольник

вопрос как
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 16:37
    #34727301
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
michael Rвопрос какСам же совершенно правильно написал, что нужно делать. Что вызывает затруднение?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 16:38
    #34727305
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
michael Rа вносить текст как
через prompt или ещё одно окно не годится
Это уже на ваше усмотрение... Хотите промптом... Хотите окном...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 17:03
    #34727415
michael R
michael R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
Antonariy Сам же совершенно правильно написал, что нужно делать. Что вызывает затруднение?


ну для начала стили чтобы были одинаковые для разных браузеров
как текстовые поля
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 17:10
    #34727439
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
Это - для конца. Для начала сделай невидимый див с position:absolute и инпутом внутри с width:100%, который по даблклику по ячейке пудет отображаться над ней, принимая ее размеры.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 17:24
    #34727480
Блок А.Н.
Блок А.Н.
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
Факир был пьян, но фокус вроде бы удался:
нужно еще отработать моменты переполнения ячеек, обработку Enter,Tab.
Стилями не получилось задавить отступ внутри input, так что чтобы не дергало, нужно делать ячейки чуть больше, чем нужно.
Если игра стоит свеч, все это можно отработать.

Проверял в опере9 и ие6
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
<html>
<head>
<style>
table#tt {border:outset 2px;background:white;border-collapse:collapse;}
table#tt td,th{border:1px inset;height:25px;}
table#tt input{background-color:red;width: 100 %;border:none;}
table#tt input,td {font-family:tahoma;font-size:14px;}
</style>
<script language=javascript>
function insertINPUT()
{if (event.srcElement.tagName!='TD') return;
 var td=event.srcElement;
 var txt=td.innerText; td.innerText='';
 var inp=document.createElement('input');
 td.appendChild(inp);
 inp.value=txt;
 inp.onblur=destroyInput;
 inp.focus();
}
function destroyInput()
{this.parentNode.innerHTML=this.value;
}
</script>
</head>

<body>
<table onclick=insertINPUT() id=tt style='width:50%'>
<tr><th style='width:20%'>head1<th style='width:20%'>head2<th style='width:60%'>head3
<tr><td> 1 <td> 2 <td> 3 
<tr><td> 11 <td> 22 <td> 33 
<tr><td>wert
</table>

</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 17:25
    #34727487
ambarka_max
ambarka_max
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
Не совсем понятно как предполагается обновлять данные в БД
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 17:32
    #34727518
Блок А.Н.
Блок А.Н.
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
Ну, автор это как-то собирался делать при 1000 INPUT. Что меняется при тысячах TD?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 17:47
    #34727564
michael R
michael R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
внесение в базу через asp
генерится xml через цикл по всем нужным (изменённым) данным из таблицы
и отправляется через submit
это у меня сделано
через TD или INPUT это уже не важно

проблема именно загрузка страницы


Блок А.Н.
спасибо за код
попробую поиграться
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 19:01
    #34727732
michael R
michael R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
авторПроверял в опере9 и ие6

в Mozell-е не работает
и дергаются TD
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 21:48
    #34727892
Блок А.Н.
Блок А.Н.
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
Дергаются прямо в моем примере?
Или когда данные не влазят?
Есть вариант принудительно фиксировать в пикселях размер ячейки перед созданием INPUT

В IE и опере у меня дергались (когда место есть) примерно на один пиксель, да и то, только внутри ячейки, этим можно пренебречь.
Мозиллы нет, проверить не могу, где там ошибка, возможно appendChild не работает, IE7,IE6,Opera9 - работает, вроде ровно
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2007, 23:38
    #34727990
michael R
michael R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
в Mozille проблема с events(я думаю что смогу это решить)
дёргание когда нет места input всегда застовляет раздвигаться TD
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.08.2007, 06:30
    #34728122
Блок А.Н.
Блок А.Н.
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
Скажите, как вам это нужно решить?
Если просто спрятать - то можно на TD в стилях сделать overflow:hiden
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.08.2007, 12:33
    #34729011
michael R
michael R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
сделал так
но есть ряд вещей которые хотелось бы исправить

1 не вешать обратотчики событий на каждый обьект а один общий
проблема не работает events в Mozille

2 установить текст в input-е по центру как в TD
если TD широкий

3 если выделять мышкой весь TD чтобы сразу брался input с выделеный текстом


Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
<html>
<head>
<style>

.xx{border:1px inset;}
 
</style>
<script language=javascript>
var lastid
var lasttext

function InType(obj)
{
 var x= getElementPosition(obj.id)
 lasttext=document.getElementById(obj.id).innerHTML
 lastid=obj.id
 document.getElementById("A1").width=document.getElementById(obj.id).offsetWidth- 1 
 document.getElementById("A1").height=document.getElementById(obj.id).offsetHeight- 1 
 document.getElementById("A2").style.width=document.getElementById(obj.id).offsetWidth
 document.getElementById("A2").style.height=document.getElementById(obj.id).offsetHeight
 document.getElementById("A1").style.top=x.top
 document.getElementById("A1").style.left=x.left
 document.getElementById("A2").value=document.getElementById(obj.id).innerHTML
 document.getElementById("A1").style.visibility="visible"
 document.getElementById("A1").style.display=""
 document.getElementById("A2").focus()
}

function getElementPosition(elemID) {
    var offsetTrail = document.getElementById(elemID);
    var offsetLeft =  0 ;
    var offsetTop =  0 ;
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }
    if (navigator.userAgent.indexOf("Mac") != - 1  && 
        typeof document.body.leftMargin != "undefined") {
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    }
    return {left:offsetLeft, top:offsetTop};
}

function CloseInput()
 {
   document.getElementById(lastid).innerHTML=document.getElementById("A2").value  //lasttext 
   document.getElementById("A1").style.visibility="hidden"
   document.getElementById("A1").style.display="none"
 }
 

</script>
</head>

<body>
<table >
<tr>
	<td id="td1" class="xx" onclick="InType(this)" ondrag="InType(this)" ondrop="InType(this)">dsad1</td>
	<td id="td2" class="xx" onclick="InType(this)" ondrag="InType(this)" ondrop="InType(this)">asd2</td>
	<td id="td3" class="xx" onclick="InType(this)" ondrag="InType(this)" ondrop="InType(this)">asdsa3</td>
<tr>
</tr>
	<td id="td4" class="xx" onclick="InType(this)" ondrag="InType(this)" ondrop="InType(this)">dfd1</td>
	<td id="td5" class="xx" onclick="InType(this)" ondrag="InType(this)" ondrop="InType(this)">fd1</td>
	<td id="td6" class="xx" onclick="InType(this)" ondrag="InType(this)" ondrop="InType(this)">dsf1</td>
</tr>
<tr>
	<td id="td7" class="xx" onclick="InType(this)" ondrag="InType(this)" ondrop="InType(this)">sdsadsa1</td>
	<td id="td8" class="xx" onclick="InType(this)" ondrag="InType(this)" ondrop="InType(this)">asdsa2</td>
	<td id="td9" class="xx" onclick="InType(this)" ondrag="InType(this)" ondrop="InType(this)">asdsada3</td>
<tr>

</table>

<div id="A1" style="position:absolute;visibility:hidden;display:none;border:none;">
	<input id="A2" onblur="CloseInput()"  type="text" width="100%" height="100%" value="" />
</div>
<input type="button"/>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.08.2007, 14:07
    #34729458
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
Наслаждайтесь...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.08.2007, 14:11
    #34729475
LINUXER
LINUXER
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
michael R class="xx" onclick="InType(this)" ondrag="InType(this)" ondrop="InType(this)"
*1000
michael Rсделал так
но есть ряд вещей которые хотелось бы исправить

1 не вешать обратотчики событий на каждый обьект а один общий
проблема не работает events в Mozille

2 установить текст в input-е по центру как в TD
если TD широкий

3 если выделять мышкой весь TD чтобы сразу брался input с выделеный текстом

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
<html>
<head>
<style>
table#tt {border:outset 2px;background:white;border-collapse:collapse;}
table#tt td,th{border:1px inset;height:25px;}
table#tt input{background-color:red;width: 100 %;border:none;}
table#tt input,td {font-family:tahoma;font-size:14px;text-align:center}
</style>
<script language=javascript>
function insertINPUT(e)
{var td=(e.target||window.event.srcElement);

 if (td.tagName!='TD') return;
 var txt=td.innerHTML; 
 var inp=document.createElement('input');
 inp.value=txt;
 inp.onblur=destroyInput;

 var sel=window.getSelection ? getSelection() : document.selection.createRange().text;
 sel+="";

 td.innerHTML='';
 td.appendChild(inp);
 inp.focus();
 if(sel.length> 0 )inp.select()
}
function destroyInput()
{this.parentNode.innerHTML=this.value;
}
</script>
</head>

<body>
<table onmouseup=insertINPUT(event) id=tt style='width:50%'>
<tr><th style='width:20%'>head1<th style='width:20%'>head2<th style='width:60%'>head3
<tr><td> 1 <td> 2 <td> 3 
<tr><td> 11 <td> 22 <td> 33 
<tr><td>wert
</table>

</body>
</html>
Было бы красиво чтобы селекшн в точности переносился в поле. Не сообразил как можно:\
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.08.2007, 15:13
    #34729713
Блок А.Н.
Блок А.Н.
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
Хм, у Antonary ничего так...
Только двойной клик раздражает

to michael R
1.так вешается обработчик на таблицу+поле редактирования. Разве это много?
2. Что не атк в моем примере?
3. Вроде выделяет и копирует. Дело в том, что при потере фокуса инпут уничтожается и выделяется просто таблица. То есть как бйдто так.

Там чтобы не дергало с большим тестом, нужно установить через стили nowrap,
white-space: nowrap

А селекшн можно подуматьь. И позицию курсора. Или можно на onmouseover тоже делать подстановку инпута
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.08.2007, 15:28
    #34729791
michael R
michael R
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
алтернатива вместо текстового поля + HTML
ребята у всех просто супер

только у Antonariy в Mozille не работают события
и всё таки хотелось центрировать текст в input как в TD

мне ещё надо будет делать проверки на разные текстовые поля свои (текст число ...)
но это я буду делать сам

разница во времени загрузки страницы колоссальная
особенно для большого кол-ва


LINUXER спасибо за обработчик событий для разных браузеров
не допёр добавить event в <table> он у меня был null
для селекшн есть selStart selLength поиграюсь с ними


Огромное всем спасибо
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / алтернатива вместо текстового поля + HTML / 25 сообщений из 35, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 501ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1457760]:
 0ms
get settings:
 9ms
get forum list:
 13ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 55ms
get topic data:
 32ms
get forum data:
 3ms
get page messages:
 138ms
get tp. blocked users:
 2ms
others: 241ms
total:  501ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]