Препълване на текстово поле

B

bunchevi

Registered
Искам да попитам какво трябва да се направи, за да може например в текстово поле когато се въвежда текст и той стане прекалено голям, да не се скрива картинката сложена за това текстово поле, а текста да продължава върху нея /т.е. от лявата страна да се скрива текста/. Надявам се да не звучи объркано.
Опитах с overflow, position и какво ли още не, но не става...
 
Не ти е много ясен въпроса. Каква е тази картинка в текстовото поле? Картинка използвана за фон като background-image? Това текстово поле какво точно е input type=text или textarea? И как точно се скрива картинката ако е фоново изображение? Дай малко код (HTML и CSSS) да видиме какво си правил.
 
Да, съжалявам наистина за объканото ми обяснение. Значи кода е следния :
HTML: 
 <div class="links">
    <form name="search" method="get" action="search.php">
    <input type="text" name="find" size="30" maxlength="80" class="inputtext" >
        <input type="submit" name="search" value="Търси" class="inputbut">
    </form>
    </div>


[css]
.inputbut {background:none; border:none;background-image:url(../but.png); background-repeat:no-repeat; width:50px; height:18px; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; font-weight:600;}

.inputtext { width:200px; height:18px; background:none; background-image:url(../search.png); background-repeat:no-repeat; border:none; font-family:Times New Roman; font-size:14px; color:#990000;}
[/css]

Тук в тези кодове съм махнала различните проби с position, overflow и т.н., които съм направила.
Проблема е, че дължината на 80 символа които съм посочила като maxlength е по- голяма от дължината на картинката, която съм сложила за текстовото поле. Така текста продължава да излиза нормално, но картинката започва да изезва наляво и така се скрива. Надявам се да се разбира какво искам да кажа. Искам да стане така че текста, който се въвежда да излиза само върху картинката, а не извън нея.
 
HTML: 
 <div class="links">
    <form name="search" method="get" action="search.php">
    <input type="textarea" name="find" size="30" maxlength="80" class="inputtext" >
        <input type="submit" name="search" value="Търси" class="inputbut">
    </form>
    </div>
Не съм сигурен, но пробвай.
 
Много странен проблем, никога не ми се е случвал, дори сега когато тествам с Firefox, твоя код работи съвсем нормално. Евентуално след no-repeat, да му добавиш и background-attachment:fixed;
 
Пробвах и с background-attachment:fixed; но тогава ми изчезна картинката за текстовото поле. Аз го тествам на IE8 и продължава да не работи, но на opera и firefox си работи перфектно! Защо е това и как може на най- широко използвания браузър да не работи?! Моля Ви ного ако някой има идея как да оправя този проблем да пише!
Благодаря Ви!
 
Почти 100% съм сигурен, че няма решение. Беше най- използваният преди години, сега е най- плюваният от повечето уеб- дизайнери, девелопъри и така нататък.
 
Явно наистина е така, но например аз /която въпреки че знам че е по- смотан от другите браузъри, го използвам по навик/ и според мен булшинството хора, които не разбират от такива неща, използват точно IE.
Забравих да спомена само, че видях доста сайтове със същата идея за текстово поле, и си работят перфектно и на IE. Не знам дали с помощта на js ще стане или по друг начин. Аз лично не държа да ми е точно с картинка текстовото поле, но искам да разбера как може да се реши този проблем. Дано има някой, който се е сблъсквал с това и знае как става ... Иначе благодаря на всички досега които се опитаха да помогнат.
 
Беше ми интересно и се разрових по нета. Решение няма, има заобикаляне на проблема.

Първо обяснението, после кода. Прави се един div в който се слага текстовото поле. Картинката, която използваш за background на текстовото поле я местиш като background на div елемента. За background на текстовото поле се завава да бъде прозрачно.

[css]
div.inputWrapper {
width: 261px;
background: #a99787 url(formInput.gif) left top no-repeat;
color: #302721;
}
div.inputWrapper:hover,
div.inputWrapper:focus {
background-position: -261px top;
}
div.inputWrapper input {
border: 0;
padding: 3px;
height: 22px;
width: 255px;
background-color: transparent;
}

[/css]

HTML: 
<div class="links">

    <form name="search" method="get" action="search.php">

    <div id="inputWrapper"><input type="text" name="find" size="30" maxlength="80" class="inputtext" ></div>

        <input type="submit" name="search" value="Търси" class="inputbut">

    </form>

</div>
 
Пробвах този вариант, но сивото поле което остава отдолу наистина не е добре и по- добре да си го оставя нормално поле. Благодаря за кода все пак.
Но тогава според вас как е направена тази търсачка на IE ако няма вариант? Дали не е някой трик със самата картинка? http://carbonica.org/
 
Направено е по абсолютно същия начин, по който ти показах по-горе, може да им видиш кода, това поне е лесно.

HTML: 
<div id="search-bg" >
<input name="ctl00$q" type="text" maxlength="512" id="ctl00_q" class="search" onclick="this.select();" onfocus="this.select();" value="Search" style="width:150px;" />
</div>


[css]
#search-bg, #page-search-bg, #subscribe-bg { width: 168px; height: 29px; background-image: url(media/images/search-input.png); background-repeat: no-repeat; text-align: left; display: block; float: left; padding: 5px 0 6px 0; }
#search-bg input.search, #page-search-bg input.search, #subscribe-bg input.search { border: 0px solid transparent; background-color: transparent; width: 150px; height: 18px; margin: 0 9px; padding: 0; font-size: 11px; color: #615c52; }
[/css]
 
Този код стана перфектно без да има сив фон зад картинката!!! Явно нещо съм изпуснала преди това като съм пробвала кода. Иначе го гледах много внимателно, но си мислех, че заради id="ctl00_q", чийто код не открих, тръгва всичко. Благодаря много!
+1
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе