powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / алтернатива вместо текстового поля + HTML
35 сообщений из 35, показаны все 2 страниц
алтернатива вместо текстового поля + HTML
    #34726215
Фотография michael R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
есть на странице много текстовых полей по 1000 штук

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

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

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

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

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

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


Блок А.Н.
мне интересно как производить на onclick вставку в ячейку поля input
можно ли какой-нибудь пример со стилями
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34726890
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
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
алтернатива вместо текстового поля + HTML
    #34726951
Фотография michael R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
функция Input что делает
хотя в принципе можно и без линка только на onclick
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34727177
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
michael Rфункция Input что делает
Вот она-то и будет выполнять редактирование произвольного текста, проверку и запись в БД...
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34727233
Фотография michael R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
а вносить текст как
через prompt или ещё одно окно не годится

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

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


ну для начала стили чтобы были одинаковые для разных браузеров
как текстовые поля
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34727439
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Это - для конца. Для начала сделай невидимый див с position:absolute и инпутом внутри с width:100%, который по даблклику по ячейке пудет отображаться над ней, принимая ее размеры.
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34727480
Блок А.Н.
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Факир был пьян, но фокус вроде бы удался:
нужно еще отработать моменты переполнения ячеек, обработку 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
алтернатива вместо текстового поля + HTML
    #34727487
ambarka_max
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Не совсем понятно как предполагается обновлять данные в БД
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34727518
Блок А.Н.
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ну, автор это как-то собирался делать при 1000 INPUT. Что меняется при тысячах TD?
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34727564
Фотография michael R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
внесение в базу через asp
генерится xml через цикл по всем нужным (изменённым) данным из таблицы
и отправляется через submit
это у меня сделано
через TD или INPUT это уже не важно

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


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

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

В IE и опере у меня дергались (когда место есть) примерно на один пиксель, да и то, только внутри ячейки, этим можно пренебречь.
Мозиллы нет, проверить не могу, где там ошибка, возможно appendChild не работает, IE7,IE6,Opera9 - работает, вроде ровно
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34727990
Фотография michael R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
в Mozille проблема с events(я думаю что смогу это решить)
дёргание когда нет места input всегда застовляет раздвигаться TD
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34728122
Блок А.Н.
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Скажите, как вам это нужно решить?
Если просто спрятать - то можно на TD в стилях сделать overflow:hiden
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34729011
Фотография 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.
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
алтернатива вместо текстового поля + HTML
    #34729458
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Наслаждайтесь...
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34729475
LINUXER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
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
алтернатива вместо текстового поля + HTML
    #34729713
Блок А.Н.
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Хм, у Antonary ничего так...
Только двойной клик раздражает

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

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

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

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

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

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


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


Огромное всем спасибо
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34730651
Фотография michael R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
для выделеного текста
selectionStart selectionEnd
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34731266
Фотография michael R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ребята
а как через JavaScript установить в текстовое поле значения текста (размер+ шрифт)
относительно TD с которого берутся значения
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34731684
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
input.style.fontFamily = td.style.fontFamily
-//- fontSize = -//- fontSize

Вопрос такой невероятной сложности, что нигде, кроме форумов, на него нет ответа.
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34731989
Фотография michael R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Спасибо

вопрос про шрифты не сложный
просто если заранее в TD не установлен шрифт или размер(его как бы нет )
то в Input -е остаётся его значение по умолчанию

наверно всё таки нужно заранее в TD ставить шрифт и размер
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34732352
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
td.currentStyle покажет окончательные значения стилей, которые элемент унаследовал от родителей.
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34735874
Фотография michael R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
хочу ещё раз сказать спасибо всем
работает просто супер

я так понимаю что и ComboBox тоже можно организовать подобным образом ?
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34736212
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
В том примере, что я выложил, изначально был и комбобокс. Так что можно.
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34740342
Фотография michael R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
возращаюсь опять

всё выше указанное работает в основном окне
если же пытаюсь выставить тот же принцип работы в pop-up окне не работает
эвенты не срабатывают
Что ещё нужно добавить
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34745661
Фотография michael R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
...
Рейтинг: 0 / 0
алтернатива вместо текстового поля + HTML
    #34748941
Фотография michael R
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
опять я

помогите побороть

в IE и MOZILLA всё нормально в OPERA проблема

добавляю текст в текстовое поле которое встраивается в TD
после потери фокуса TD раздвигается
но при этом лезут какие значки
если опустить экран и снова поднять это уходит
как произвести визуальную перестройку таблицы чтобы этого не было
...
Рейтинг: 0 / 0
35 сообщений из 35, показаны все 2 страниц
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / алтернатива вместо текстового поля + HTML
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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