Empty Text field

Ask the community
,
1

Hi,

Is there a way I can add an empty Text field on a page. When I try to delete all text in a text field, the text field itself gets deleted.
I checked if there is place holder option for it, but I could not find it.
There are times we need an empty text fields, not even placeholder that site visitors could see. I can make it empty on loading the page but when there are too many text fields it requires too many lines of codes only to make text fields empty.

My scenario,
I have around 100 text fields (all on one page if four categories) which needs to be filled with a result of a calculation after taking input from the visitors. If there is place holder then too visitors would see it, hence, in this scenario I would not prefer placeholder text.
As I understand either I have to hide the field and then unhide when it’s needed, but it requires too many lines of codes and it would take time to process it, at least a little bit of time.
Another issue is, I wanted to add the result with the value already in the text field. In that case the default value causes an issue.
As I understand, I have to clear the value of the field on page load. Again, the lines of codes and time are the issue here.

The workaround maybe is to use textinput field and customize it, but again it needs to be enabled and disabled to prevent any input by the visitors. After all this is a text view field.

Is there any other way? or am I missing an option to make a Text field empty?

Thank you

2

Hello Learn UntilDie,

" When I try to delete all text in a text field, the text field itself gets deleted. "

Really? I did some tests, but i musst say, that i cannot confirm your statement.

Try it yourself one more time.

  • Create a textfield on your site (“text1”).

  • Create 2x buttons (“BTN1”) & (“BTN2”).

  • Create on both buttons the (“onClick-Event”)

  • Put in this little piece of code into your site.

  • Test it.

What happens?

export function BTN1_click(event) {$w('#text1').text=""}
export function BTN2_click(event) {$w('#text1').text="Hello worlld my name is TEXTFIELD, i am back!"

The textfield is still there and was not deleted. You can refill it.

Why it would take a lot of coding lines?
Is it not possible to write the code just for ONE textfield and then do the rest with a loop ?

for (var i = 0; i < 100; i++) {
 //....here do my code ...
}
3

When I said " When I try to delete all text in a text field, the text field itself gets deleted. " I meant that delete the text in Text element in the editor, not by using code.

As for the loop, I didn’t think of using a for-loop for it, but it’s still extra lines (loop) of code that system needs to execute.
However, thanks for your suggestion I wonder if this is workable in the following scenario.
I have more than a hundred Text elements on my page and some of them will hold headings/labels and some of the Text elements are to hold the result of the calculation which I was talking about.
If I want to make all the Text field elements empty then I could have used (maybe) the for loop, but in my case how can I make specific Text elements that has a (totally) different ID empty using a for-loop.

I do not know if the following is possible and how to do it if it is possible at all.
That, put all those Text elements in a container and make all the text elements in the container empty using loop. If this can be done then it’s OK for my scenario as my text elements are not scattered and it’s like a group of text elements and I can put them in a couple of containers.
I would like to know if there is any other way as I will have to deal with other scenario as I move on where text elements are scattered and not easy to put in containers.

Please let me know how to do it in both scenarios.

4

“I do not know if the following is possible and how to do it if it is possible at all.
That, put all those Text elements in a container and make all the text elements in the container empty using loop.”

Container = >>>> Array (put all gathered into a container should be possible) with an Array.

var myArray = [] -----> should create an empty Array (the container you mentioned)

Then to fill your container (Array) you will need something like…

myArray = myArray.push(....your DATA here...);

and to check your CONTAINER (Array)…

console.log(myArray)    //----> shows whole Array
console.log(myArray[0]) //----> shows first item of Array    
console.log(myArray[1]) //----> second item (and so on)...
console.log(myArray.length) //---> shows the Array-Length
5

And this here could find all your TextFields in your project…

It was written by me, so i don’t know if it works perfectly.
I think you will have to optimize it a little bit.:grin:

var myArray
var counter

$w.onReady(function () {
 var myElement = "#text"
 var targetId

  for (var i = 1; i < 10; i++) {
        $w(myElement+i).onViewportEnter( (event) => {
            targetId = event.target.id; 
            console.log((targetId))
            myArray.push(targetId)
            counter = counter+1 
            console.log(counter)
        })
    }
    console.log(myArray)
    console.log(counter)
    $w('#TXTtotaltables').text=counter  
})

For example if you have many tables on your site (table1, table2 and so on…),
you can also serch for “tables”.

All you have to do is to change from “text” to “table”.

Not sure, but it should work.

6

Well, it’s absolutely clear you did not get an adequate answer. No matter what I do, if I create a text box and leave no text in it, it gets automatically delete. The problem is sometimes you need empty boxes that get filled later dynamically one way or the other. The only workaround is to put some inconspicuous text (like a “.”) in it so it doesn’t get disappeared. But even that text can show up and make things look ugly. If anyone has a solution to this, please…

7

And I forgot to add… Of course, you can hide the field and then show it when you add the text - but really, should that be necessary?

8

I’m probably a little late to this, but I recently found this workaround to get empty text fields

  1. Delete everything in the text field
  2. Press Space
  3. Click anywhere on the screen so that the text field is deleted
  4. Press Ctrl + Z. The text field should be brought back with no text in it
9

Hi. You can mark your text field as “Hidden” if you don’t want it to be displayed before getting the actual value and display it later when it gets the value:

let textField = $w('#yourTextFieldId')
textField.show().then(() => {
    textField.text = 'Put in your value here';
});
10

bro…you save my life…
I slove this problem almost 2 days
I appreciate.ur my hero