HTML, JavaScript table και "αυτόματη αλλαγή σειρών"

[merchenary]

Καλησπέρα, έχω φτιάξει έναν πίνακα παρόμοιο με αυτήν την σελίδα :

https://www.viralpatel.net/demo/listbox-drop-down-add-row-table.html

κάθε φορά που γράφω κείμενο στην μια σειρά θέλω αφού πιάσει το full length της γραμμής να πηγαίνει αυτόματα στην επόμενη γραμμή! Η με Enter από τον χρήστη να κάνει το ίδιο.

 

Ξέρει κάποιος πως γίνεται; 

[spectaculator]

22 λεπτά πριν, merchenary είπε

Καλησπέρα, έχω φτιάξει έναν πίνακα παρόμοιο με αυτήν την σελίδα :

https://www.viralpatel.net/demo/listbox-drop-down-add-row-table.html

κάθε φορά που γράφω κείμενο στην μια σειρά θέλω αφού πιάσει το full length της γραμμής να πηγαίνει αυτόματα στην επόμενη γραμμή! Η με Enter από τον χρήστη να κάνει το ίδιο.

 

Ξέρει κάποιος πως γίνεται; 

Τι ακριβώς θέλεις να κάνεις; Φαντάζομαι πως το input στο html το όρισες σαν text. Πρέπει να το ορίσεις σαν textarea. Π.χ.

Εσύ μάλλον έχεις κάτι σαν αυτό:

<input type="text">

Πρέπει στη θέση του να βάλεις κάτι σαν αυτό:

<textarea name="Text1" cols="40" rows="5"></textarea>

 

[merchenary]

30 λεπτά πριν, spectaculator είπε

Τι ακριβώς θέλεις να κάνεις; Φαντάζομαι πως το input στο html το όρισες σαν text. Πρέπει να το ορίσεις σαν textarea. Π.χ.

Εσύ μάλλον έχεις κάτι σαν αυτό:

<input type="text">

Πρέπει στη θέση του να βάλεις κάτι σαν αυτό:

<textarea name="Text1" cols="40" rows="5"></textarea>

Αυτό που θέλω να κάνω είναι να γράφω στον πίνακα όπως γράφουμε σε ένα τετράδιο, η στο word που όταν φτάνει στην άκρη της σελίδας σε πηγαίνει μόνο του στην επόμενη γραμμή... Τώρα έτσι όπως το έχω συνεχίζει οσο γράφω να πηγαίνει δεξιά...

[spectaculator]

10 λεπτά πριν, merchenary είπε

Αυτό που θέλω να κάνω είναι να γράφω στον πίνακα όπως γράφουμε σε ένα τετράδιο, η στο word που όταν φτάνει στην άκρη της σελίδας σε πηγαίνει μόνο του στην επόμενη γραμμή... Τώρα έτσι όπως το έχω συνεχίζει οσο γράφω να πηγαίνει δεξιά...

Ο.κ. Κάνε αυτό που σου είπα. Το <input type="text"> κάνει αυτό που λες, μια γραμμή με μοναδικό όριο χαρακτήρων αυτό που ορίζεις. Εσύ χρειάζεσαι ένα textarea όπως σου έδειξα.

Αυτό

<textarea name="Text1" cols="40" rows="5"></textarea>

Θα σου φτιάξει μια περιοχή διαστάσεων 40 χαρακτήρων οριζόντια και 5 γραμμών και θα μπορείς να αλλάξεις γραμμή με το enter.

[archer100]

6 λεπτά πριν, spectaculator είπε

Ο.κ. Κάνε αυτό που σου είπα. Το <input type="text"> κάνει αυτό που λες, μια γραμμή με μοναδικό όριο χαρακτήρων αυτό που ορίζεις. Εσύ χρειάζεσαι ένα textarea όπως σου έδειξα.

Αυτό

<textarea name="Text1" cols="40" rows="5"></textarea>

Θα σου φτιάξει μια περιοχή διαστάσεων 40 χαρακτήρων οριζόντια και 5 γραμμών και θα μπορείς να αλλάξεις γραμμή με το enter.

Φαινεται η καλυτερη λυση, απλα θα ηταν ιδανικο αν το rows δεν ηταν προκαθορισμενο, αλλα αυξανονταν αυτοματα κατα μια γραμμη οταν καποιος εφτανε στο τελος της προηγουμενης γραμμης. Ξερεις αν γινεται αυτο;

Σιγουρα γινεται με Javascript (function που να τσεκαρει το μηκος του text και οταν αυτο ειναι πανω απο 40 να αλλαζει το rows σε 2 οταν ειναι πανω απο 80 σε 3 κ.ο.κ.)

[spectaculator]

5 λεπτά πριν, archer100 είπε

Φαινεται η καλυτερη λυση, απλα θα ηταν ιδανικο αν το rows δεν ηταν προκαθορισμενο, αλλα αυξανονταν αυτοματα κατα μια γραμμη οταν καποιος εφτανε στο τελος της προηγουμενης γραμμης. Ξερεις αν γινεται αυτο;

Σιγουρα γινεται με Javascript (function που να τσεκαρει το μηκος του text και οταν αυτο ειναι πανω απο 40 να αλλαζει το rows σε 2 οταν ειναι πανω απο 80 σε 3 κ.ο.κ.)

To textarea δεν έχει όριο χαρακτήρων. Όταν θα γεμίσει, τότε θα βγει scrollbar στα δεξιά της. Ο χρήστης θα μπορεί να το μεγαλώσει σέρνοντας την άκρη του κάτω-δεξιά. Δες το εδώ

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_textarea

 

[merchenary]

Φίλε spectaculor αν κατάλαβα καλά η λύση που δίνεις είναι ένα ενιαίο text που να πηγαίνει σαν το word... Εγώ όμως δεν θέλω αυτό στο πρόβλημα μου... Θέλω να παραμείνει το row table και να δουλέψω εκεί γραμμή γραμμή 

[archer100]

1 λεπτό πριν, merchenary είπε

Φίλε spectaculor αν κατάλαβα καλά η λύση που δίνεις είναι ένα ενιαίο text που να πηγαίνει σαν το word... Εγώ όμως δεν θέλω αυτό στο πρόβλημα μου... Θέλω να παραμείνει το row table και να δουλέψω εκεί γραμμή γραμμή 

Μαλλον μονο με javascript φιλε. Η λογικη θα ειναι:

(αρχικα το rows στο textarea θα ειναι 1)

1. getelement -> check text size

2. if textsize>40 -> rows = 2

3. if textsize>80 -> rows =3 

κ.ο.κ.

[merchenary]

37 λεπτά πριν, archer100 είπε

Μαλλον μονο με javascript φιλε. Η λογικη θα ειναι:

(αρχικα το rows στο textarea θα ειναι 1)

1. getelement -> check text size

2. if textsize>40 -> rows = 2

3. if textsize>80 -> rows =3 

κ.ο.κ.

- Άλλη ερώτηση είναι στο copy paste του χρήστη αυτήν η λογική με την μέτρηση χαρακτήρων θα δουλεύει αν το κείμενο είναι μεγαλύτερο σε χαρακτήρες; Θα μπορεί να το "σπάει" και στην επόμενη γραμμή;

[archer100]

1 ώρα πριν, merchenary είπε

- Άλλη ερώτηση είναι στο copy paste του χρήστη αυτήν η λογική με την μέτρηση χαρακτήρων θα δουλεύει αν το κείμενο είναι μεγαλύτερο σε χαρακτήρες; Θα μπορεί να το "σπάει" και στην επόμενη γραμμή;

Λογικα ναι

[k33theod]

Το textarea έχες τις εξής ιδιότητες ως object  https://www.w3schools.com/jsref/dom_obj_textarea.asp

Εσύ θα χρησιμόποιεις την obj.rows την οποία θα κάνεις ίση με obj.value.... όπου πολλές τελείες είναι ο αριθμός των γραμμών του value και ένας τρόπος να βρείς είναι πχ. value είναι το κείμενο.

 obj.rows=obj.value.split("\n").length;

Aυτό θα το βάλεις μέσα σε ένα event_listener που κάνει listen στο change https://www.w3schools.com/jsref/dom_obj_event.asp  του obj.

 Μετά αν θα έχω χρόνο θα γράψω κώδικα.

Επεξ/σία 2 Αυγούστου 2019 από k33theod

[eleionos]

Δεν ξερω αν σου κανει αυτο. 

Καθε φόρα που πιάνει το όριο  των 50 χαρακτηρων στο πρωτο πεδιο παει αυτοματα στο δευτερο.Αυτο μπορεις να το κανεις για οσα πεδια θελεις.

https://jsfiddle.net/308krqmv/

Επεξ/σία 2 Αυγούστου 2019 από eleionos

[archer100]

Αυτο δουλευει φιλε:

Javascript:

function increasesize() {
    var x=document.getElementById("longtext").value;
    if (x.length>40) {
        document.getElementById("longtext").rows=2;
    }    

    if (x.length>80) {
        document.getElementById("longtext").rows=3;
    }   

    if (x.length>120) {
        document.getElementById("longtext").rows=4;
    }  
    if (x.length>160) {
        document.getElementById("longtext").rows=5;
    } 

}

Και ο κωδικος του element ειναι:

<td><textarea id="longtext" cols="40" rows="1" onkeyup="increasesize()"> </textarea> </td>

[k33theod]

Εδώ είναι και ένα δικό μου

//το αρχείο .js
var x = document.getElementById("myTextarea");
x.cols = 30;
x.addEventListener('input', change_rows);

function change_rows()
{
	var lines = x.value.split("\n");
	x.rows=lines.length;
	var last_line = lines[lines.length-1];
	if (last_line.length>x.cols-1)
		x.value+='\n';
}

Η αλλαγή όμως της standar συμπεριφοράς των στοιχείων είναι λάθος. Όταν έχεις textarea κανείς δεν περιμένει να μεγαλώσει το ύψος ή μήκος ή να προσθέτονται γραμμές σε table αυτόματα κλπ.

 

13 ώρες πριν, archer100 είπε

Αυτο δουλευει φιλε:

Javascript:

function increasesize() {
    var x=document.getElementById("longtext").value;
    if (x.length>40) {
        document.getElementById("longtext").rows=2;
    }    

    if (x.length>80) {
        document.getElementById("longtext").rows=3;
    }   

    if (x.length>120) {
        document.getElementById("longtext").rows=4;
    }  
    if (x.length>160) {
        document.getElementById("longtext").rows=5;
    } 

}

Και ο κωδικος του element ειναι:

<td><textarea id="longtext" cols="40" rows="1" onkeyup="increasesize()"> </textarea> </td>

archer 

Aντί το παραπάνω

var x=document.getElementById("longtext");

function increasesize()
{
    x.rows = parseInt(x.value.length/x.cols)+1;
}    

 

 

Επεξ/σία 3 Αυγούστου 2019 από k33theod

[merchenary]

Ευχαριστώ γιατις απαντήσεις παιδιά!

Τα ανωτέρω δουλεύουν και αν ο χρήστης κάνει copy paste ένα κείμενο μεγαλύτερο του length χαρακτήρων;

Και άλλο ένα πρόβλημα που θα συναντήσω είναι το εξής...

Ο χρήστης κάνει copy paste το παρακάτω κείμενο...

HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document.

Hellow Word.

 

στο paste θα εμφανιστεί έτσι και στις γραμμές του πίνακα; Η αν μια γραμμή είναι μεγαλύτερη του length θα την σπάει αυτόματα στην επόμενη;

Δηλαδή : ( όπου αριθμοί είναι γραμμές πίνακα.)

 

 

1.HTML DOM events allow JavaScript to register 2.different event handlers on elements in an HTML 3.document.

4.Hellow Word.

 

Και στο υποθετικό σενάριο ότι η γραμμή 2 κατα το paste έχει μεγαλύτερο αριθμό χαρακτήρων από το max length πως θα το εμφανίσει; Θα το σπάσει αυτόματα στην επόμενη σειρά; Και οι υπόλοιπες γραμμές;