Why is the comma in two text fields put at the same time without focusing?

How can I change conditions in code when comma is pressed? So that the comma does not appear simultaneously in two text boxes 1 and 2 when typing, but separately? The same thing happens with the limitation of characters in these text fields. How to split the processing of two text fields among themselves! Why is the comma placed without focusing text fields?
Foto:

Complete code:

import controlP5.*;
ControlP5 cp5;
Textfield X9;
Textfield X10;
void setup() {
size(700,400);
PFont font = createFont("arial",20);
cp5 = new ControlP5(this);
X9 = cp5.addTextfield("1")
.setPosition(20,100)
.setSize(200,40);
X9.setInputFilter(ControlP5.INTEGER)
.setFont(font)
.setAutoClear(false)
.setColor(color(255,0,0))
;
X10 = cp5.addTextfield("2")
.setPosition(20,170)
.setSize(200,40);
X10.setInputFilter(ControlP5.INTEGER)
.setFont(createFont("arial",20))
.setAutoClear(false)
;
textFont(font);}
void draw() {
background(0);
fill(255);}
public void keyPressed(KeyEvent e) {
if (e.getKey() == ','){
X9.setText(X9.getText() + ',');}
{
//  if(X10.getText().length()>=4) { X10.setText(X10.getText().substring(0, 3));}
{
if (e.getKey() == ','){
X10.setText(X10.getText() + ',');}
{
// if(X9.getText().length()>=4) { X9.setText(X9.getText().substring(0, 3));}
}}}
}

> Why is the comma placed without focusing text fields?

Because you are using the global keyPressed() event.
This condition: if (e.getKey() == ',') checks that the , key is pressed and it's redundant to check twice in your case. It's equivalent to this simpler/cleaner snippet:

public void keyPressed(KeyEvent e) {
if (key == ','){
X9.setText(X9.getText() + ',');
X10.setText(X10.getText() + ',');
}
}

There isn't any check if a field is focused or not.

You probably meant something like this ?:

public void keyPressed(KeyEvent e) {
if (key == ',') {
if (X9.isFocus()) {
X9.setText(X9.getText() + ',');
}
if (X10.isFocus()) {
X10.setText(X10.getText() + ',');
}
}
}

Overall it's unclear what the main goal is. Perhaps there's a simpler way to achieve it ?

Remeber that you can listen for individual controlP5 component events via void controlEvent(ControlEvent event). See Processing > Examples > Contributed Libraries > ControlP5 > controllers > ControlP5Textfield for a nice demo.

Additionally I recommend formatting/keeping code tidy. It may be a quick throw-away sketch, but buiilding a good habbit will pay off as you'll spend way more time reading code than writing code. As your programs become larger and larger you'll want to make life easier for your future self

Update Based on your comments here is a minimal sketch that should allow you control a floating point number between 7.4 and 16.8 and an integer number between 1800-1900:

import controlP5.*;
ControlP5 cp5;
int serialInt = 1800;
float serialFloat = 7.4;
void setup() {
size(300,300);
noStroke();
cp5 = new ControlP5(this);
cp5.addNumberbox("serialInt")           // notice the component name matches the variable name: controlP5 links the two for you
.setBroadcast(false)                 // disable events while we update value specific properties 
.setPosition(100,100)                // screen location
.setSize(100,20)                     // screen dimensions
.setMultiplier(10)                   // set the sensitifity of the numberbox: each step is 10
.setDirection(Controller.HORIZONTAL) // change the control direction to left/right
.setRange(1800, 9000)                // set minimum, maximum value
.setBroadcast(true)                  // enable events (after setting range)
;
cp5.addNumberbox("serialFloat")
.setBroadcast(false)                 // disable events while we update value specific properties
.setPosition(100,140)                // screen location
.setSize(100,20)                     // screen dimensions
.setMultiplier(0.01)                 // set the sensitifity of the numberbox: each step is 0.01
.setDirection(Controller.HORIZONTAL) // change the control direction to left/right
.setRange(7.4,16.8)                  // set minimum, maximum value
.setBroadcast(true)                  // enable events (after setting range)
;
}
void draw() {
background(0);
}
// gets called whenever a component updates value
void controlEvent(ControlEvent event){
println(event.getController().getName(),"changed value to",event.getValue(),"serialInt = ",serialInt,"serialFloat = ",serialFloat);
}

Click and drag horizontally to change values.
Notice a few helpful things that ControlP5 provides:

• if you name your controller the same name as the controller the two are connected automatically: huge time saver. (If you can't use variable safe name you can look at Examples > Contributed Examples > ControlP5 > use > ControlP5plugTo)
• you can easily set the range and precision desired
• you can use controlEvent() optionally to tell when a value changed

Regarding data over serial:

• 7.4 to 16.8 range is easy if you only need .1 precision: simply multiply the value by 10 bringing it to 74 to 168 which fits within a single byte (0-255 range)
• 1800 to 9000 range is trickier because 9000-1800 = 7200 steps in between. For this precision you would need at least 13 bits (2 ^ 13 = 8192 so can fit 7200 values). You might need to split that into two bytes (2 ^ 16) using something equivalent to highByte() and lowByte() in Processing before sending and word() in Arduino (or equivalent STM32 Dev tools if not using Arduino).

For example:

void serialWriteWord(Serial port,int value){
port.write(highByte(value));
port.write(lowByte(value));
}
byte lowByte(int word){
return (byte)(word & 0xff);
}
byte highByte(int word){
return (byte)(word >> 8);
}

The serial communication part is a totally separate issue (for another question)